理解 Vue.set 方法：原理、流程和代码演示

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐内容链接1openlayers 从基础到精通，300+代码示例 2leaflet 热门分解学习教程，150+图文示例 3cesium 从0到1学习指南，200+代码示例 4 mapboxGL 从入门到实战，150+图文示例 5canvas 示例应用100+，揭密底层细节 6javascript从基础到高级，示例展示200+ 7vue2 实战指南，100+个细节深度剖析

文章目录

Vue.js 中的 Vue.set 方法（在 Vue 2.x 版本中）或其等价实例方法 vm.$set（在组件内部使用），是用来确保对响应式对象属性进行动态添加时，该属性也能成为响应式的，并且能触发视图更新的方法。
用于动态地修改对象的属性

使用原因: 对象不能响应式更新

~响应式依赖收集：

Vue 使用 ES5 的 Object.defineProperty 方法对数据对象中的属性进行拦截，实现getter和setter。当组件渲染时，Vue会追踪哪些属性被访问过，将它们关联到对应的 Watcher 实例上。

~默认响应化过程：

在初始化阶段，Vue 只会对已经存在的对象属性执行响应式处理。如果直接在已声明为响应式的对象上通过字面量方式添加新的属性（如 this.someObject.newProperty = ‘newValue’），新属性不会触发 getter 和 setter，因此不会被添加到响应系统中。

~Vue.set 的作用：
Vue.set 方法就是用来解决这个问题的。

它会在目标对象上创建一个新的属性，并确保这个属性同样经过了响应式处理，

即调用了 defineProperty 来设置 getter 和 setter。

执行流程

Vue.set(target, key, value) 的执行流程是这样的：

• 首先，检查目标对象是否是 Vue 能够进行响应式处理的对象。
• 然后，在目标对象上定义一个新的属性 key，并使用 defineProperty 技术来确保它是可响应的，包括对它的读取和修改都能触发相关依赖的更新。
• 最后，将给定的 value 赋予新属性，并通知所有依赖于此对象的 Watcher 进行视图更新。

代码示例

// 创建一个 Vue 实例const vm =newVue({data:{message:'Hello, Vue!'}});// 使用 Vue.set 向响应式对象中添加一个新属性
Vue.set(vm.$data,'newMessage','Hello, World!');// 输出新属性的值
console.log(vm.newMessage);// 输出 "Hello, World!"// 修改新属性的值
vm.newMessage ='Hello, 大剑师兰特!';// 输出新属性的值
console.log(vm.newMessage);// 输出 "Hello, 大剑师兰特!"

数组变异方法的补充

对于数组，Vue 提供了一系列变异方法（如 push、pop、shift、unshift、splice 等），这些方法可以自动触发视图更新。然而，当你需要直接修改数组的索引时（比如新增一个不存在的索引），也需要使用 Vue.set 或 vm.$set 来确保相应变化能够触发视图刷新。

总结

Vue.set 方法的主要作用是向响应式对象中添加一个新属性，并确保新属性同样是响应式的

。这个方法的实现原理依赖于 Vue 的数据响应式系统，通过 Object.defineProperty 方法将新属性添加到对象上，并设置 getter 和 setter。在使用 Vue.set 时，需要注意其适用范围和注意事项，以确保正确地使用。