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

Posted 2023-02-22

【中文标题】如何观察 javascript 数组中对象的变化？

【英文标题】：How to watch for changes in objects inside javascript array?

【发布时间】：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 也是响应式的。