Vue3响应式原理那些事

最新推荐文章于 2025-05-06 21:11:43 发布

村头的猫

最新推荐文章于 2025-05-06 21:11:43 发布

阅读量1.2k

点赞数 30

文章标签： javascript 前端 vue.js 前端框架

本文链接：https://blog.csdn.net/m0_47221837/article/details/147719376

版权

文章目录

近期文章：

Vue3 的双向响应式原理是其核心机制，通过 Proxy 代理与 依赖收集系统 实现数据与视图的自动同步。以下是其核心原理与技术细节的深度解析：

1 响应式基础：Proxy 与 Reflect

Vue3 彻底抛弃了 Vue2 的 Object.defineProperty，改用 ES6 Proxy 实现数据劫持，解决了 Vue2 无法监听对象属性新增/删除、数组索引修改等问题。

1.1 Proxy 代理拦截

Proxy 可拦截对象的所有操作（如 get、set、deleteProperty 等），解决了 Vue2 中 Object.defineProperty 无法监听新增属性和数组索引修改的问题。

Proxy 默认采用惰性代理，仅在访问嵌套对象时递归创建代理，优化了性能。

const handler = {
   
  get(target, key, receiver) {
   
    track(target, key); // 依赖收集
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
   
    const result = Reflect.set(target, key, value, receiver);
    trigger(target, key); // 触发更新
    return result;
  }
};
const proxyData = new Proxy(data, handler);

1.2 Reflect 确保 `this` 指向正确

Reflect 的静态方法与 Proxy 的拦截器一一对应，确保操作的一致性和安全性：

1.2.1 修正 `this` 指向问题

当代理对象包含访问器属性（如 get c() { return this.a + this.b }）时，若直接通过 target[key] 读取属性，this 会指向原对象而非代理对象，导致后续属性访问无法触发 Proxy 拦截。

解决方案：使用 Reflect.get(target, key, receiver)，其中 receiver 显式传递代理对象，确保 this 指向正确。

 // 错误示例（this指向原对象）
 get(target, key) {
    return target[key]; }

 // 正确示例（通过Reflect修正this）
 get(target, key, receiver) {
    return Reflect.get(target, key, receiver); }

1.2.2 统一的操作返回值

Reflect 方法返回布尔值（如 Reflect.set() 返回操作是否成功），简化了错误处理流程。

1.3 与 Vue2 的对比

特性	Vue2 (Object.defineProperty)	Vue3 (Proxy + Reflect)
属性监听	需遍历属性逐个劫持	代理整个对象，自动处理新增/删除属性
数组支持	需重写数组方法	直接拦截原生数组操作
性能	初始化递归遍历，性能较差	惰性代理，按需触发拦截
代码复杂度	需手动处理嵌套对象和数组	原生支持复杂数据结构

2 依赖收集与触发机制

Vue3 的依赖收集机制通过 Proxy 拦截访问 → 全局拓扑存储 → 精准触发更新 的链路，实现了高效、精准的响应式更新。其 WeakMap 结构、ReactiveEffect 双向链接和 惰性代理 等特性，使得框架具备更高的性能。

2.1 全局依赖存储结构：WeakMap → Map → Set

Vue3 使用三级数据结构管理依赖关系，确保高效的内存管理和精准的依赖追踪：

// 源码位置：packages/reactivity/src/effect.ts
type Dep = Set<ReactiveEffect>;
type KeyToDepMap = Map<any, Dep>;
const targetMap = new WeakMap<any, KeyToDepMap>(); // 全局依赖存储

// 结构示意：
WeakMap {
   
  [targetObject]: Map {
   
    [key]: Set<effect1, effect2...>
  }
}

WeakMap：键为原始对象（避免内存泄漏），值为 KeyToDepMap。
KeyToDepMap：键为对象属性名，值为 Dep（存储关联的副作用函数集合）。
Dep：Set<ReactiveEffect>，保证副作用的唯一性。

2.2 依赖收集触发时机

当访问响应式对象的属性时，Proxy 的 get 拦截器触发依赖收集流程：

// 源码简化：packages/reactivity/src/baseHandlers.ts
function createGetter() {
   
  return function get(target: object, key: string |

最低0.47元/天解锁文章