Vue3中的readonly、shallowReadonly

readonly：复制一份响应式数据变成只读的，但原数据发生改变复制的也会变 shallowReadonly：使对象深层次可以改，浅层次不能改

<script setup lang="ts">
import {reactive, ref, readonly, shallowReadonly} from 'vue'

let brand1 = ref("华为")
// 将brand1复制一份为不能改的brand2，但brand1变brand2也变
let brand2 = readonly(brand1)
let state1 = reactive({
  vehicle: '小米汽车su7',
  options: {
    color: "蓝色"
  }
})
let state2 = shallowReadonly(state1)


setTimeout(() => {
  brand1.value = '小米' // 能改
  brand2.value = "oppo" // 不能改

  state1.vehicle = "问界M5"  // 能改
  state2.vehicle = "五零星光"  // 不能改
  state2.options.color = "灰色"  // 能改
  state2.options = {color: "咖色"}  // 不能改
}, 1000)

</script>