更深入地观看效果级别答案

【问题标题】：Watch effect level deeper更深入地观看效果级别
【发布时间】：2021-09-08 08:56:21
【问题描述】：

每当数组内的值发生更改时，我都会尝试记录，它只会在我添加或删除它时控制台记录项目，但是当其中的某些内容发生更改时如何记录？例如，我希望看到 item.Circle.position 在更改后被控制台记录。

是的，我试过用 deep: true 观看，但也不会记录它。

watchEffect(async () => {
    await map.value.circles.forEach((item, i) => console.log(item.Circle, i))
})

watch(async () => {
    await map.value.circles.forEach((item, i) => console.log(toRaw(item.Circle), i))
}, { deep: true })

【问题讨论】：

【解决方案1】：

尝试观察数组值的副本，使用函数语法作为第一个参数

watch(() => [...map.value], async () => {
    await map.value.circles.forEach((item, i) => console.log(toRaw(item.Circle), i))
})

如果您的数组包含“深层”对象，则需要进行深层复制。这是一个使用 lodash 的示例

watch(() => _.cloneDeep(map.value), async () => {
    await map.value.circles.forEach((item, i) => console.log(toRaw(item.Circle), i))
})

最后一个问题可能是您改变数据的方式。尝试使用Vue.set(...) 而不是直接添加属性，例如map['foo'] = 'bar' 或map.foo = 'bar'，以确保新属性具有反应性。

【讨论】：