解释 Vue 3 源码中 `Proxy` 拦截器在 `get` 操作中如何同时实现依赖收集和对 `ref` 的自动解包（`unwrap`）。

各位观众，大家好！我是今天的主讲人，咱们今天唠唠 Vue 3 源码里那让人又爱又恨的 Proxy 拦截器，特别是它在 get 操作中，一边忙着依赖收集，一边还要照顾 ref，给它自动解包（unwrap）。这活儿可不是一般人能干的，咱们得好好扒一扒它的底裤，看看它到底是怎么做到的。

开场白：Vue 3 的响应式系统，Proxy 是个啥？

在 Vue 3 的响应式世界里，Proxy 就像一个尽职尽责的门卫，守护着你的数据。任何对数据的读取（get）或修改（set），都逃不过它的法眼。而咱们今天重点关注的 get 操作，它肩负着两大使命：

1. 依赖收集 (Dependency Collection): 记录是谁（组件、计算属性等）想要读取这个数据，以便将来数据变化时，能够通知到这些“订阅者”，让它们乖乖更新。
2. ref 的自动解包 (Auto-Unwrapping of ref): 如果你读取的数据是个 ref，Proxy 要聪明地把它里面的真实值掏出来给你，而不是把整个 ref 对象给你，让你自己去 .value。

第一幕：Proxy 拦截器的基本结构

首先，咱们先看看 Proxy 拦截器的基本样子。在 Vue 3 的源码里，通常会看到类似这样的代码：

const mutableHandlers = {
  get(target, key, receiver) {
    // 依赖收集 + ref 解包的逻辑就在这里！
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    // 设置值的逻辑，不是今天的重点
    return Reflect.set(target, key, value, receiver);
  }
};

// 创建响应式对象的工厂函数
function reactive(target) {
  return new Proxy(target, mutableHandlers);
}

这段代码里，mutableHandlers 是一个包含了各种拦截器的对象。我们今天的主角就是 get 拦截器。Reflect.get 则是用来真正读取对象属性的。receiver 是指向 Proxy 实例的。

第二幕：依赖收集，你是谁，从哪里来，要到哪里去？

依赖收集的核心在于，我们要知道是谁在读取这个数据。这个“谁”通常是一个组件的渲染函数，或者是一个计算属性的 getter 函数。Vue 3 通过一个全局变量 activeEffect 来记录当前正在运行的 effect (副作用函数)。而组件的渲染函数或者计算属性的 getter 函数，都会被包裹在一个 effect 里。

// 假设我们有一个全局变量 activeEffect
let activeEffect = null;

// effect 函数，用来包裹副作用函数
function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn; // 记录当前的 effect
    const res = fn(); // 执行副作用函数
    activeEffect = null; // 执行完后，清空 activeEffect
    return res;
  };
  effectFn(); // 立即执行一次
}

// 示例：
let count = reactive({ value: 0 });
effect(() => {
  console.log("Count changed:", count.value); // 读取 count.value
});

count.value++; // 触发更新，会重新执行 effect

在这个例子里，effect 函数内部会将 activeEffect 设置为当前 effect 函数，然后执行传入的函数 fn。在 fn 内部，读取了 count.value，这时候 activeEffect 就能记录下来，是哪个 effect 依赖了这个 count.value。

现在，让我们把依赖收集的代码放到 get 拦截器里：

const targetMap = new WeakMap(); // 用于存储 target -> key -> effects 的映射

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }

    deps.add(activeEffect);
  }
}

const mutableHandlers = {
  get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);
    track(target, key); // 依赖收集
    return res;
  },
  set(target, key, value, receiver) {
    // 设置值的逻辑，不是今天的重点
    return Reflect.set(target, key, value, receiver);
  }
};

function reactive(target) {
  return new Proxy(target, mutableHandlers);
}

track 函数负责依赖收集。它先从 targetMap 找到 target 对应的 depsMap，再从 depsMap 找到 key 对应的 deps (一个 Set)。如果 activeEffect 存在，就把它添加到 deps 里。这样，我们就知道了哪个 effect 依赖了哪个属性。

第三幕：ref 的自动解包，脱掉你的马甲！

ref 的自动解包，就是指当读取一个 ref 对象的 value 属性时，Proxy 会自动把 ref 对象里面的真实值返回给你。这避免了每次使用 ref 的时候都要手动 .value 的麻烦。

首先，我们需要一个 isRef 函数来判断一个对象是不是 ref：

function isRef(value) {
  return value && value.__v_isRef === true;
}

然后在 get 拦截器里，加上 ref 的解包逻辑：

const mutableHandlers = {
  get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);
    track(target, key); // 依赖收集

    if (isRef(res)) {
      return res.value; // ref 解包
    }

    return res;
  },
  set(target, key, value, receiver) {
    // 设置值的逻辑，不是今天的重点
    return Reflect.set(target, key, value, receiver);
  }
};

function reactive(target) {
  return new Proxy(target, mutableHandlers);
}

现在，如果读取的属性是一个 ref，get 拦截器会先进行依赖收集，然后判断这个属性是不是 ref。如果是，就返回 res.value，也就是 ref 内部的真实值。

第四幕：集大成者，依赖收集 + ref 解包，一个都不能少！

现在，我们把依赖收集和 ref 解包的代码整合在一起，看看最终的 get 拦截器是什么样子：

const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }

    deps.add(activeEffect);
  }
}

function isRef(value) {
  return value && value.__v_isRef === true;
}

const mutableHandlers = {
  get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);

    track(target, key); // 依赖收集

    if (isRef(res)) {
      return res.value; // ref 解包
    }

    return res;
  },
  set(target, key, value, receiver) {
    // 设置值的逻辑，不是今天的重点
    return Reflect.set(target, key, value, receiver);
  }
};

function reactive(target) {
  return new Proxy(target, mutableHandlers);
}

// 示例：
let count = reactive({ value: 0, refValue: ref(10) });

effect(() => {
  console.log("Count changed:", count.value); // 读取 count.value
  console.log("RefValue changed:", count.refValue); // 读取 count.refValue，自动解包
});

count.value++;
count.refValue++; // 触发 ref 的更新

在这个例子中，count 对象包含了两个属性：value 和 refValue。value 是一个普通的值，refValue 是一个 ref。当我们读取 count.refValue 的时候，Proxy 会自动把 refValue 里面的真实值返回给我们。

第五幕：shallowReactive 和 readonly 的特殊处理

除了 reactive 之外，Vue 3 还提供了 shallowReactive 和 readonly。shallowReactive 只会对对象的第一层属性进行响应式处理，而 readonly 则会阻止对对象的修改。

在 shallowReactive 中， ref 的解包逻辑需要放到 shallowReadonlyHandlers 和 shallowReactiveHandlers 中， 确保浅层响应式和只读性。

const shallowReactiveHandlers = {
    get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);

        track(target, key);

        if (isRef(res)) {
            return res.value;
        }

        return res;
    },
    set(target, key, value, receiver) {
       // ... 设置逻辑
        return Reflect.set(target, key, value, receiver);
    }
};

const shallowReadonlyHandlers = {
    get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);

        track(target, key);

        if (isRef(res)) {
            return res.value;
        }

        return res;
    },
    set(target, key, value, receiver) {
        console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
        return true;
    }
};

function shallowReactive(target) {
    return new Proxy(target, shallowReactiveHandlers);
}

function shallowReadonly(target) {
    return new Proxy(target, shallowReadonlyHandlers);
}

第六幕：总结与思考

咱们今天一起扒了 Vue 3 源码里 Proxy 拦截器在 get 操作中的依赖收集和 ref 自动解包的逻辑。这其中有几个关键点：

• activeEffect: 全局变量，记录当前正在运行的 effect。
• track 函数: 负责依赖收集，把 activeEffect 添加到 targetMap 中。
• isRef 函数: 判断一个对象是不是 ref。
• ref 的自动解包: 在 get 拦截器里，判断如果读取的属性是 ref，就返回 ref.value。

功能	实现方式
依赖收集	通过 activeEffect 记录当前正在运行的 effect，然后在 track 函数里，把 activeEffect 添加到 targetMap 中。targetMap 是一个 WeakMap，用于存储 target -> key -> effects 的映射。
ref 的解包	在 get 拦截器里，先调用 track 进行依赖收集，然后判断如果读取的属性是 ref，就返回 ref.value。如果不是 ref，就直接返回属性值。
shallowReactive	与 reactive 类似，但只对第一层属性进行响应式处理。ref 的解包逻辑保持不变。
readonly	阻止对对象的修改。在 set 拦截器里，直接返回 true，表示设置失败。 ref 的解包逻辑保持不变。

Vue 3 的响应式系统，通过 Proxy 和 Reflect，实现了非常灵活和高效的数据绑定。理解了这些底层的原理，我们就能更好地使用 Vue 3，写出更健壮、更易维护的代码。

今天的讲座就到这里，谢谢大家！ 咱们下回再见！