如何监视javascript数组中对象的变化？

Question

我正在使用electron和vue.js创建一个Todo应用程序

我有一个名为items的对象数组。每个对象都具有以下语法：

{id: <Number>, item: <String>, complete: <Boolean>, starred: <Boolean>}

我想在文件内部更改任何内容（包括对象属性）时将items数组保存在文件中，我需要注意这些更改。

我尝试了Vue watch，但它只在添加或删除对象时触发，而不是在对象的属性发生变化时触发。

这是devTools打开程序的屏幕截图。我添加了一个项目starred和completed。所以，我期待3个控制台日志，但我只得到一个（当添加对象时）。

任何想法??

Answer 1

使用deep来观察对象更改：

watch{
  item: {
     handler(newValue, oldValue){
       // something
     },
     deep: true
  }
}

Answer 2

如果你使用Vue.set（），那么每个item-object的props也会被反应。