首页 前端知识 理解 Vue.set 方法:原理、流程和代码演示

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

2024-02-29 12:02:27 前端知识 前端哥 120 946 我要收藏

在这里插入图片描述

查看本专栏目录


关于作者

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2949.html
标签
Vue.set
评论
会员中心 联系我 留言建议 回顶部
复制成功!