【VUE】Vue2中vm.$set 的实现原理

Vue2中的实现原理是通过defineReactive和Observer来实现的。具体步骤如下:

  • 如果目标是数组,直接使用数组的 splice 方法触发相应式;
  • 如果要更新对象属性,且这个属性不存在于对象中(即它是响应式数据的新增属性),那么Vue2会使用$set函数来进行设置;
  • vm.$set会先判断对象是否为响应式的,如果不是,则直接赋值即可,如果是,则继续执行以下步骤;

1.vm.$set会先调用Object.getOwnPropertyDescriptor方法获取对象属性描述符,如果该属性已存在,Vue2就不能将其转换成响应式属性了,因此直接返回;

  1. 如果属性不存在,则调用Object.defineProperty方法,给该属性添加getter和setter方法,并将其转换为响应式属性;

  2. 在setter方法中,更新属性值时,如果新值仍然是一个对象(或者数组),则递归调用observer函数进行深度观测,以便对新值的变化做出响应。

由于Vue2将对象属性转换为响应式属性的过程只需要在第一次调用$set时进行,所以后续直接使用对象属性的赋值操作就可以起到响应式更新效果。

相关推荐
guslegend15 小时前
脚手架原理与本地调试:从 bin 软链接到 npm link
前端·npm·node.js·脚手架·前端工程化
小宋102115 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子15 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
海码事务所15 小时前
Google Play 新个人开发者账号上架指南:12 人连续 14 天封闭测试怎么做?
前端
田威AI15 小时前
图片内文字翻译的规格:输入输出、保真、自动化、时间与费用
前端·计算机视觉
不可能片场16 小时前
命令行中文变问号 我用环境变量救了场
前端·electron
lerhxx16 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象32716 小时前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户553182973216 小时前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端
前端snow16 小时前
为什么大厂要用Postgres + mogodb的框架?
前端