关于作者
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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 时,需要注意其适用范围和注意事项,以确保正确地使用。