查看本专栏目录
关于作者
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。
| 热门推荐 | 内容链接 |
|---|---|
| 1 | openlayers 从基础到精通，300+代码示例 |
| 2 | leaflet 热门分解学习教程，150+图文示例 |
| 3 | cesium 从0到1学习指南，200+代码示例 |
| 4 | mapboxGL 从入门到实战，150+图文示例 |
| 5 | canvas 示例应用100+，揭密底层细节 |
| 6 | javascript从基础到高级，示例展示200+ |
| 7 | vue2 实战指南，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 = new Vue({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 时，需要注意其适用范围和注意事项，以确保正确地使用。