vue3 reactive使用(四)

1：reactive全家桶

rective直接赋值无效，会破坏proxy响应式代理

const newList = reactive<string[]>([])
const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList = res  
    console.log('newList:', newList)  // dom没有变化，log会有变化
  }, 500)
}

变通

方案一

const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList.push(...res)  // 使用push方法，和解构语法
    console.log('newList:', newList) // dom双向绑定成功，log也正常
  }, 500)
}

方案二

添加一个对象，把数组作为一个属性去解决

let newList = reactive<{
  array: string[]
}>({
  array: [],
})

const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList.array = res  // 直接赋值，可以生效
    console.log('newList:', newList)  // dom和log正常显示
  }, 500)
}

1. readonly：只读
2. shallowReactive和shallowRef类似，做浅层处理