如何观察 javascript 数组中对象的变化？答案

【问题标题】：How to watch for changes in objects inside javascript array?如何观察 javascript 数组中对象的变化？
【发布时间】：2018-07-31 21:36:32
【问题描述】：

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

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

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

每当数组内的任何内容（包括对象属性）发生更改时，我都想将items 数组保存在一个文件中，我需要注意这些更改。

我试过 Vue 的watch，但它只在添加或删除对象时触发，而不是在对象的属性更改时触发。

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

有什么想法吗？？

【问题讨论】：

【解决方案1】：

使用 deep 观察对象变化：

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

【讨论】：

【解决方案2】：

如果你使用 Vue.set()，那么每个 item-object 的 props 也是响应式的。

【讨论】：