在 Vue.js 开发中，我们通常使用动态数据来渲染我们的页面，而且在动态数据中，对象数据类型占据了重要的地位。然而，当我们修改 Vue 对象中的对象属性时，我们会面临一个问题：对象属性修改之后，并不能让 Vue 实例立刻感知到数据的变化，从而不能及时地更新视图。
为了解决这个问题，Vue.js 提供了 Vue.set 方法来实现对象属性的响应式修改。下面就让我们一起来详细了解一下 Vue.set 方法，以及如何使用它来实现 Vue 对象中的对象属性的响应式修改。
什么是 Vue.set 方法？
Vue.set 是 Vue.js 提供的一个全局方法，可以帮助我们在修改 Vue 对象属性时，让 Vue 实例立刻感知到数据的变化，从而及时地更新视图。
Vue.set 方法有三个参数：
- obj：要修改的对象；
- key：要修改的对象属性的名称；
- value：修改后的属性的值。
下面是使用 Vue.set 方法的示例代码：
Vue.set(obj, key, value);
其中，obj 是要修改的对象，key 是要修改的对象属性的名称，value 是修改后的属性的值。
Vue.set 方法的作用原理
当我们在 Vue 对象中修改对象属性时，如果直接使用赋值的方式进行修改，Vue 实例便无法感知到数据的变化，也就无法及时地更新视图。
而使用 Vue.set 方法，Vue 实例可以监听到数据变化的动作，从而及时更新视图。Vue.set 方法会做两件事情：
- 如果对象本身是响应式的，那么直接修改对象属性即可；
- 如果对象本身不是响应式的，那么通过 Vue.observable 方法把它变成响应式对象，然后再修改对象属性。
Vue.set 方法的作用原理可以解决 Vue 对象中的对象属性无法响应式更新的问题，使得我们在开发中更加方便地使用对象数据类型来渲染我们的页面。
如何使用 Vue.set 方法？
下面我们通过一个示例来了解如何使用 Vue.set 方法来实现 Vue 对象中的对象属性的响应式修改。
假设我们现在有一个 Vue 实例：
const vm = new Vue({
data: {
user: {
name: 'jones',
age: 20
}
}
});我们要修改 user 对象的 name 属性，当我们没有使用 Vue.set 方法时，代码如下：
vm.user.name = 'Tom';
上面的代码直接修改了 user 对象的 name 属性，但是该修改并没有立刻体现在视图中。
这时，我们可以使用 Vue.set 方法来解决该问题，代码如下：
Vue.set(vm.user, 'name', 'Tom');
通过使用 Vue.set 方法，我们可以成功的实现了 user 对象属性的响应式修改，使得 Vue 实例可以及时地感知到数据的变化，从而更新页面视图。
总结
在 Vue.js 开发中，如果要使用对象数据类型，我们需要特别关注对象属性的响应式修改问题。而 Vue.set 方法提供了一种解决方案，可以使我们更加方便地使用对象数据类型来渲染页面。当我们需要修改 Vue 对象中的对象属性时，可以通过使用 Vue.set 方法来实现对象属性的响应式修改，从而让 Vue 实例及时地感知到数据变化，更新页面视图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc3fd15ad90b6d042523df