Vue.js vm.$set 与 Vue.set 有什么区别

在本文中，我们将介绍 Vue.js 中的两种设置数据的方式：vm.$set 和 Vue.set。这两种方法在处理响应式数据时有一些区别，我们将详细了解它们的使用场景和差异。

vm.$set 方法

vm. $set 是 Vue 实例提供的方法，用于在响应式对象上设置一个属性，使其具有响应式。该方法接受三个参数：对象、属性名和属性值。$

以下是使用 vm.set 的示例：

// 创建一个 Vue 实例
var vm = new Vue({
  data: {
    user: {
      name: 'John',
      age: 25
    }
  }
})

// 使用 vm.set 设置响应式属性
vm.set(vm.user, 'gender', 'male')

console.log(vm.user.gender) // 输出 'male'

在上述示例中，我们创建了一个 Vue 实例，并在 user 对象上使用了 vm.$set 方法来设置一个新的属性 gender。我们可以发现，无论是在控制台中还是在模板中使用 {{ user.gender }}，都能得到正确的结果。

Vue.set 方法

Vue.set 是全局 Vue 对象提供的方法，与 vm. $set 的作用相同。使用 Vue.set 可以在响应式对象上设置一个属性，并使其成为响应式。与 vm.$ set 不同的是，Vue.set 的语法比较简单，只需要传递两个参数：对象和属性名。

以下是使用 Vue.set 的示例：

// 创建一个 Vue 实例
var vm = new Vue({
  data: {
    user: {
      name: 'John',
      age: 25
    }
  }
})

// 使用 Vue.set 设置响应式属性
Vue.set(vm.user, 'gender', 'male')

console.log(vm.user.gender) // 输出 'male'

在上述示例中，我们使用 Vue.set 方法在 user 对象上设置了一个新的属性 gender，并使其具有了响应式。

vm.$set 与 Vue.set 的区别

vm.$set 和 Vue.set 在功能上是完全一样的，都用于在响应式对象上设置属性。它们的区别在于调用方式和作用域。

调用方式：vm.$set 是通过 Vue 实例的方法来调用，而 Vue.set 是直接通过 Vue 对象调用。
作用域：vm.$set 只能在当前 Vue 实例中使用，而 Vue.set 是全局可用的。

在大多数情况下，我们使用 vm.$set 就可以很好地完成响应式属性的设置工作。但在某些特殊情况下，如果我们需要在多个 Vue 实例之间共享数据并保持响应式，就需要使用 Vue.set。

总结

在本文中，我们介绍了 Vue.js 中的两种设置数据的方式：vm. $set 和 Vue.set。它们都可以用于在响应式对象上设置属性，并使其具有响应式。它们的区别在于调用方式和作用域。在大多数情况下，我们可以使用 vm.$ set 进行属性设置，但在需要在多个 Vue 实例之间共享数据并保持响应式的特殊情况下，我们需要使用 Vue.set。希望通过本文的介绍，能帮助读者更好地理解和使用 Vue.js 中的数据设置方法。