为什么手表对对象数组中对象属性的更改没有反应？

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}
)