Vue js/javascript对象数组-如何检测是否有任何对象已更改以及更改了哪一个

我在做一个Vuejs项目。在某些情况下，我有一个对象数组（从服务器获取的数据），如下所示：

[
    {
        name: "Book one",
        price: 12,
        active: true
    },
    {
        name: "Small drone X12",
        price: 54,
        active: false
    },
    {
        name: "something else",
        price: 32,
        active: true
    }
]

数据用于在页面上生成动态表单，以便用户可以编辑数据。 如何检查用户是否更改了任何对象以及哪一个对象（可以更改一个、两个或任意数量），以便向用户显示更新更改数据的按钮。

---

我只想更新实际已更改的对象中的数据，而不是全部数据。

您可以在映射数组中保留对象的计算JSON字符串

const comparison = data.map(JSON.stringify); // in order string based values for direct comparison

在后面的代码中，您可以与这些值进行比较

data.forEach((obj, index) => {
  // if they do match, skip
  if (JSON.stringify(obj) === comparison[index]) return;

  // they don't match, update comparison value
  comparison[index] = JSON.stringify(obj);

  // update VUE state and other things here
})

这样，您只需要更新更新的值，并且只需要计算比较值。即使对象更新了某些字段，但仍然是相同的对象（即使值已更新，也将通过

object===object

的相等性测试），此操作仍然有效

另一个更复杂的例子是代理或监视对象上的每个setter，以便在对象更新时触发更改，但就我而言，我仍然不理解代理的正确性

如果字段数组的大小发生变化怎么办？ 如果数据的大小从未改变，则此操作有效，如果数据数组的大小改变。。。它仍然可以工作，因为匹配索引中有一个未定义的字符串，导致字符串比较返回false。但是，最好将其添加到表单中，然后在最后对上述代码进行简单修改：

if (comparison[index] === undefined) {
  // add the form to the field, it'll add in order
}
// they don't match, update comparison value
...

---

一种方法是在传递对象的数组索引和修改字段的属性名称时侦听

change

事件。然后将该值分配给另一个保存更改的数组

newvue({
el:“#应用程序”，
数据：（）=>({
项目：[
{
名称：“第一册”，
价格：12，
主动：正确
},
{
名称：“小型无人机X12”，
价格：54，
活动：错误
},
{
名称：“其他东西”，
价格：32，
主动：正确
}
],
更改：[]
}),
挂载（）{
this.changed=数组（this.items.length）.fill（{}）
},
方法：{
onPropertyChanged（索引、属性）{
this.changed.splice（索引，1，Object.assign（{}，this.changed[index]，{[prop]：this.items[index][prop]}））
}
}
})

名称
价格
活跃的

变化
{{item}}