VUE 批量更新对象数组中一个属性的值

在 Vue.js 中，当你需要批量更新对象数组中某个属性的值时，可以利用 `map()`、`forEach()` 或者 `Array.prototype.filter()` 等数组方法配合 `this.$set()` 来避免触发视图不必要的重新渲染。这是因为直接修改数组元素可能导致组件认为数据已经改变，即使只是单个对象属性的变化。

假设你有一个名为 `items` 的数组，每个元素都有一个 `status` 属性：

let items = [
  { id: 1, status: 'active' },
  { id: 2, status: 'inactive' },
  //...
];

如果你想将所有 `status` 设为 `'completed'`，可以这样做：

// 使用 map() 和 $set()
items = items.map(item => {
  this.$set(item, 'status', 'completed');
  return item; // 返回新修改过的对象，保持数组结构
});

// 或者使用 forEach()
items.forEach(item => {
  this.$set(item, 'status', 'completed');
});

// 或者使用 filter() 临时创建新的数组
const updatedItems = items.filter(item => item.status !== 'completed').map(item => ({
  ...item,
  status: 'completed'
}));
items = updatedItems;

以上三种方法都能达到效果，但是推荐使用 `map()` 并替换原数组，因为它会生成一个新的数组，并保留原有的响应式特性。