Vue 响应式原理：从 2.x 的 Object.defineProperty 到 3.x 的 Proxy

一张图记住结论：
Vue2 = 递归属性劫持（defineProperty）
Vue3 = 整体对象代理（Proxy）

1. 为什么要变？

痛点	Vue2 表现	Vue3 解决
新增/删除属性	不能自动触发更新	自动追踪
数组下标/length	需要重写 7 个变异方法	原生语法直接拦截
深层对象	初始化时一次性递归，耗时	用到哪层代理哪层（懒代理）
IE 兼容	必须支持 IE9	只支持现代浏览器

2. Vue2：Object.defineProperty 时代

2.1 核心思路

遍历 data 所有属性
为每个属性调用 Object.defineProperty 植入 getter/setter
在 getter 中收集依赖（Dep.target = Watcher）
在 setter 中派发更新（dep.notify()）

2.2 最小实现

function defineReactive(obj, key, val) {
  const dep = new...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
BlackHoleMax
BlackHole's Blog
马上订阅 BlackHoleMax RSS 更新: https://blackholemax.github.io/atom.xml
Vue 响应式原理：从 2.x 的 Object.defineProperty 到 3.x 的 Proxy
2025年9月25日 14:00
一张图记住结论：
Vue2 = 递归属性劫持（defineProperty）
Vue3 = 整体对象代理（Proxy）
1. 为什么要变？
痛点 Vue2 表现 Vue3 解决
新增/删除属性 不能自动触发更新 自动追踪
数组下标/length 需要重写 7 个变异方法 原生语法直接拦截
深层对象 初始化时一次性递归，耗时 用到哪层代理哪层（懒代理）
IE 兼容 必须支持 IE9 只支持现代浏览器
2. Vue2：Object.defineProperty 时代
2.1 核心思路
遍历 data 所有属性
为每个属性调用 Object.defineProperty 植入 getter/setter
在 getter 中收集依赖（Dep.target = Watcher）
在 setter 中派发更新（dep.notify()）
2.2 最小实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function defineReactive(obj, key, val) {
  const dep = new...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
BlackHoleMax
BlackHole's Blog
马上订阅 BlackHoleMax RSS 更新: https://blackholemax.github.io/atom.xml
Vue 响应式原理：从 2.x 的 Object.defineProperty 到 3.x 的 Proxy
2025年9月25日 14:00
一张图记住结论：
Vue2 = 递归属性劫持（defineProperty）
Vue3 = 整体对象代理（Proxy）
1. 为什么要变？
痛点 Vue2 表现 Vue3 解决
新增/删除属性 不能自动触发更新 自动追踪
数组下标/length 需要重写 7 个变异方法 原生语法直接拦截
深层对象 初始化时一次性递归，耗时 用到哪层代理哪层（懒代理）
IE 兼容 必须支持 IE9 只支持现代浏览器
2. Vue2：Object.defineProperty 时代
2.1 核心思路
遍历 data 所有属性
为每个属性调用 Object.defineProperty 植入 getter/setter
在 getter 中收集依赖（Dep.target = Watcher）
在 setter 中派发更新（dep.notify()）
2.2 最小实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function defineReactive(obj, key, val) {
  const dep = new...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章