【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时进行,所以后续直接使用对象属性的赋值操作就可以起到响应式更新效果。

相关推荐
AbelTomato12 分钟前
博客评论系统搭建回顾
javascript·typescript·cloudflare·supabase·hyperdrive
梦醒沉醉14 分钟前
4、函数function
javascript
爱勇宝18 分钟前
公司没给活干,却因为员工看手机把人开了:法院判赔11万元
前端·后端·程序员
Csvn27 分钟前
模块化与工程化:CJS / ESM / 打包器,到底怎么协作?
前端
hunterandroid38 分钟前
[鸿蒙从零到一] ArkTS Sendable 数据模型与跨线程共享实战
前端
摇滚侠1 小时前
《SpringBoot 3:入门与应用实战》第 9 章 使用 WebMvc 开发应用 阅读笔记 22
javascript·spring boot·笔记
AICoder码农王1 小时前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
xiaominlaopodaren1 小时前
three.js地图视口瓦片(一):屏幕角点射线
javascript·gis·three.js
律宏阔1 小时前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究1 小时前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端