Vue2 中 `Vue.set()` 和 `vm.$set()`

用途

在 Vue2 中，如果我们想要给一个对象添加一个新的属性，那么这个属性是不会被响应式的，也就是说，如果我们修改了这个属性的值，那么页面是不会更新的。因为 Vue3 中的 Proxy 代理，所以 Vue3 中不存在这个问题。

const vm = new Vue({
  data: {
    obj: {
      name: 'Leo',
      age: 18,
    },
  },
})

vm.obj.name = 'Leo' // 页面会更新
vm.obj.tall = 185 // 页面不会更新

所以，我们需要使用 Vue.set() 或者 vm.$set() 来给对象添加新的属性，这样这个属性就是响应式的了。

Vue.set(vm.obj, 'tall', 185)
vm.$set(vm.obj, 'tall', 185)

两者的区别

1. Vue.set() 是全局方法，而 vm.$set() 是实例方法，两者的作用是一样的。

2. 实现方式不一样，Vue.set() 是通过 Object.defineProperty() 来实现的，而 vm.$set() 是通过 vm 实例的 defineReactive() 方法来实现的。