Vue 2 中的 `$set` 方法详解

在 Vue 2 中，响应式数据的更新非常重要，因为它确保了当数据改变时，视图能够自动更新。Vue 使用一套高效的机制来追踪依赖并在数据变化时更新视图。然而，在某些情况下，直接修改对象的属性可能不会触发视图更新。这时，$set 方法就显得尤为重要。

1. $set 方法简介

$set 是 Vue 实例的一个方法，用于向响应式对象添加一个新的属性，并确保新属性同样是响应式的，能够触发视图更新。

语法

Vue.set(target, propertyName, value)

• target：要添加属性的对象。
• propertyName：要添加的新属性的名称。
• value：新属性的值。

2. 为什么需要 $set

在 Vue 中，只有通过 data 函数声明的属性才是响应式的。如果你在实例创建之后直接添加新的属性，那么这个属性不是响应式的，不会触发视图更新。

示例

export default {
  data() {
    return {
      object: {}
    };
  },
  mounted() {
    this.object.newProperty = 'newValue'; // 直接添加属性，不会触发视图更新
    this.$set(this.object, 'newProperty', 'newValue'); // 使用 $set 添加属性，会触发视图更新
  }
}

在这个例子中，直接给 object 添加 newProperty 属性不会触发视图更新，而使用 $set 方法添加则可以。

3. $set 的使用场景

动态添加属性

当你需要在运行时动态添加新的属性到对象中时，使用 $set 可以确保新属性是响应式的。

示例

methods: {
  addProperty() {
    this.$set(this.someObject, 'dynamicProperty', 'value');
  }
}

修改数组索引

虽然 Vue 能够自动追踪数组的变化，但是直接通过索引修改数组项可能不会触发更新。使用 $set 可以确保更新是响应式的。

示例

methods: {
  updateItem(index, newValue) {
    this.$set(this.items, index, newValue);
  }
}

4. $set 与 Vue.set 的区别

• $set：Vue 实例方法，只能在组件实例中使用。
• Vue.set：全局方法，可以在任何地方使用，包括组件外部。

示例

// 在组件内部使用 $set
this.$set(this.someObject, 'newProperty', 'value');

// 在组件外部使用 Vue.set
Vue.set(someObject, 'newProperty', 'value');

5. 注意事项

• 使用 $set 时，如果添加的属性名已经存在于对象中，Vue 会更新该属性的值，而不是添加一个新的属性。
• 在 Vue 3 中，由于使用了 Proxy 作为响应式系统的基石，直接设置对象的属性也能保证响应性，因此 $set 的使用场景有所减少。

结论

$set 是 Vue 2 中一个非常有用的工具，它允许你在对象中动态添加响应式属性。理解并正确使用 $set 可以帮助你更好地管理 Vue 应用中的响应式数据。