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

相关推荐
Maimai1080810 分钟前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
candyTong13 分钟前
Claude Code 的 Edit 工具是怎么工作的
javascript·后端·架构
kyriewen2 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm2 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy3 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao3 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端
IT_陈寒3 小时前
SpringBoot那个自动配置的坑,害我排查到凌晨三点
前端·人工智能·后端
Honor丶Onlyou3 小时前
VS Code 右键菜单修复记录
前端
卡卡军3 小时前
agmd 1.0 重磅升级——Rust 重写,性能起飞
javascript·rust
PILIPALAPENG3 小时前
Python 语法速成指南:前端开发者视角(JS 类比版)
前端·人工智能·python