Vue 中 $set() 与 Vue.set() 原理及使用

导言

在 Vue.js 中，响应式系统是一个核心特性，它允许自动更新视图中绑定的数据。然而，在某些情况下，可能需要手动更新响应式数据，此时 Vue 提供了 $set() 和 Vue.set() 方法来实现这一目的。本文将探讨这两种方法的原理和使用场景，帮助开发者更好地掌握 Vue 中响应式数据操作。

$set() 方法

$set() 方法是 Vue 实例对象的方法，用于设置响应式对象的属性值。其语法如下：

vm.$set(target, key, value)

其中：

• vm：Vue 实例
• target：目标响应式对象
• key：属性名称
• value：属性值

当使用 $set() 方法时，Vue 会自动将属性值添加到响应式系统，并且当值发生更改时触发视图更新。需要注意的是，$set() 方法只能用于添加或修改现有的响应式属性，而不能用于删除属性。

Vue.set() 方法

Vue.set() 方法是 Vue 全局对象的方法，其语法与 $set() 方法类似：

Vue.set(target, key, value)

与 $set() 方法不同，Vue.set() 方法可以用于任何对象，包括非响应式对象。当使用 Vue.set() 方法时，如果 target 对象不是响应式的，Vue 会自动将其转换为响应式对象，并添加或修改属性值。

使用场景

$set() 和 Vue.set() 方法在不同的场景下都有其优势：

• 使用 $set() 方法： 当需要在 Vue 实例中更新响应式属性值时，使用 $set() 方法更方便，因为不需要手动获取 Vue 实例对象。
• 使用 Vue.set() 方法： 当需要更新非响应式对象中的属性值时，或者需要在非 Vue 上下文中使用 set() 方法时，可以使用 Vue.set() 方法。

实例演示

下面是一个使用 $set() 方法更新 Vue 实例中响应式属性值的示例：

const vm = new Vue({
  data: {
    message: 'Hello World'
  }
})

vm.$set(vm.data, 'message', 'Goodbye World')

运行上述代码后，message 属性的值将更新为 Goodbye World，并且视图将自动更新。

下面是一个使用 Vue.set() 方法更新非响应式对象中属性值的示例：

const obj = {
  name: 'John'
}

Vue.set(obj, 'age', 30)

运行上述代码后，obj 对象中添加了一个新的属性 age，值为 30。

总结

$set() 和 Vue.set() 方法都是 Vue 中更新响应式数据的有效方法。通过了解这两种方法的原理和使用场景，开发者可以在不同的情况下选择合适的方法来操作响应式数据，从而实现更灵活和高效的 Vue 应用开发。