为什么手表不响应对象数组中对象属性的更改

Question

考虑以下(简化的(存储。它持有一个"；注释"；(类对象(：

// store.ts
import { reactive } from 'vue'
import { Note } from 'src/lib/note'
class Store {
allNotes: Note[] = []
}
export const store = reactive(new Store())

我想看allNotes的变化：

// note.ts
import { store } from 'src/lib/store'

watch(store.allNotes,
(oldVal, newVal) => _.difference(newVal, oldVal)
.forEach(note => {
console.log("note changed")
}),
{deep: true}
)

当更改特定音符(store.allNotes元素的属性(时，我确实在Chome DevTools Vue中看到了更改，但我的手表不会触发。为什么？

Answer 1

reactive属性在watch方法中不会自动展开(与ref属性不同(，因此您需要使用函数watch(()=>store.allNotes,...:返回它们

watch(()=>store.allNotes,
(oldVal, newVal) => _.difference(newVal, oldVal)
.forEach(note => {
console.log("note changed")
}),
{deep: true}
)