vue3 reactive使用(四)

墨轩尘2023-09-24 18:12

1：reactive全家桶

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

javascript 复制代码

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

变通

方案一

javascript 复制代码

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

方案二

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

javascript 复制代码

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

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

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