深入理解vue中的$set

下面是关于“深入理解Vue中的$set”的完整攻略。

什么是$set

在 Vue.js 中，我们经常需要在已有的数据对象中添加新的属性，但是这样做是响应式的吗？答案是否定的。因为 Vue.js 在初始化实例时将属性转化为 getter/setter，所以属性必须在初始化时存在才能让 Vue.js 转化它为响应式的数据。但是，Vue提供了一种方法来帮助我们完成动态添加响应式数据的操作，那就是Vue.set 或 $set 方法。

在代码中加入 Vue.set 或者 this.$set，可以通过 Vue.set 或者 this.$set 来将一个对象的属性设为响应式属性，这样当新属性被添加时，Vue会通知所有的依赖它的组件进行渲染更新。

什么时候使用$set

当我们想要改变原有数组或对象的某个属性时，Vue.js 无法监听到这种变化。这时候，我们一般有以下两种方式：

1. 直接使用数组的变异方法，例如 push，splice 等，对象直接使用属性值的变化。
2. 通过set方法更新

方式一虽然会改变原有变量的值，但是 Vue.js 无法更新它的 DOM，也就是说，如果想要更新页面中的数据，我们需要使用$set。

方式二是当我们想要更新一个对象的属性，而又不想全量覆盖对象时。下面我们通过两个示例来具体了解这个方法。

示例1

（1）我们先创建一个包含数组的对象：

var data = { arr: [1, 2, 3] };

（2）现在我们想要向这个数组中添加一个元素。此时我们可以使用push：

data.arr.push(4);

但是这样做是不会响应式的。也就是说，虽然我们更新了数据，但是页面中并不会更新：

<div id="app">
  <ul>
    <li v-for="item in arr" :key="item">{{ item }}</li>
  </ul>
</div>

但是，我们可以使用this.$set方法来完成响应式更新：

this.$set(data.arr, 3, 4);

这样就可以实现响应式更新了。

示例2

（1）我们先创建包含一个对象的数组：

var data = { arr: [{ name: "Tom", age: 18 }] };

（2）我们现在需要修改这个对象中的某个属性，比如说，将其age改为20。使用直接赋值的方式修改时，虽然对象中的属性已经被修改，但是页面并没有更新：

data.arr[0].age = 20;

（3）如果我们使用 Vue.set 或 this.$set 方法来修改数据对象中的属性，则可以实现响应式更新：

this.$set(data.arr[0], "age", 20);

这样就可以实现响应式更新了。

总结

• 使用 Vue.js 时，尽量避免在对象上直接新添加属性。
• 在添加新的属性时，应使用 Vue.set 或 this.$set 方法。
• 使用 Vue.set 或 this.$set 方法，可以实现全局响应式更新，而普通的赋值则不能做到。
• 对于修改数组元素、直接修改对象属性值的操作，Vue.js 无法捕获到，不会触发数据更新视图，可以使用 Vue.set 或 this.$set 方法来实现响应式更新。

希望对您有所帮助。