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类似，做浅层处理