一、响应式概述

1.1 Vue响应式演进

• Vue 2：Object.defineProperty

• Vue 3：Proxy

• Vue 3.5：响应式系统重构，更高效

1.2 核心概念

数据变化 → 触发更新
   ↑
  依赖追踪
   ↑
  访问收集
   ↑
  Proxy拦截

二、Proxy实现

2.1 基础Proxy

const proxy = new Proxy(target, {
  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;
  }
});

三、依赖收集系统

3.1 依赖存储结构

// WeakMap: target -> Map -> Set
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let dep = targetMap.get(target)?.get(key);
    if (!dep) {
      dep = new Set();
      targetMap.set(target, new Map([[key, dep]]));
    }
    dep.add(activeEffect);
  }
}

function trigger(target, key) {
  const dep = targetMap.get(target)?.get(key);
  dep?.forEach(effect => effect());
}

四、computed实现

4.1 computed原理

class ComputedRefImpl {
  constructor(getter) {
    this._dirty = true;
    this.effect = effect(getter, {
      lazy: true,
      scheduler: () => { this._dirty = true; }
    });
  }

  get value() {
    if (this._dirty) {
      this._value = this.effect.run();
      this._dirty = false;
    }
    return this._value;
  }
}

五、Vue 3.5改进

5.1 响应式Props解构

();
console.log(title); // 无需props." _ue_custom_node_="true">

六、总结

Vue 3.5响应式要点：
1. Proxy：拦截所有操作
2. 依赖收集：访问时记录
3. 触发更新：修改时通知
4. computed：惰性求值