解释 Vue 3 源码中 `Proxy` 拦截器在 `get` 操作中如何同时实现依赖收集和对 `ref` 的自动解包（`unwrap`）。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，大家好！今天咱们来聊聊 Vue 3 源码里一个非常酷炫的地方：Proxy 拦截器在 get 操作中如何一边“监视”你访问了哪些数据（依赖收集），一边又悄悄地把 ref 给你解包了（unwrap）。这就像一个身手敏捷的管家，默默地帮你处理各种琐事，让你用起来倍感舒适。

一、前戏：Proxy 是个什么鬼？

在深入代码之前，咱们先简单回顾一下 Proxy 这个 ES6 的神器。Proxy 可以理解为目标对象的一个“代理”，你对目标对象的所有操作，都会先经过 Proxy 这层拦截器。通过设置不同的 handler，我们可以自定义这些操作的行为。

举个简单的例子：

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get(target, property, receiver) {
    console.log(`有人想访问 ${property} 属性！`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`有人想修改 ${property} 属性为 ${value}！`);
    return Reflect.set(target, property, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：有人想访问 name 属性！ 张三
proxy.age = 35; // 输出：有人想修改 age 属性为 35！

在这个例子里，我们创建了一个 Proxy，拦截了 get 和 set 操作。每次访问或修改属性，都会先触发 handler 里的函数，打印一些信息。Reflect 对象提供了一套方法，用于执行与 Proxy 对象拦截的操作相对应的默认行为。

二、Vue 3 的响应式系统：reactive 和 ref

Vue 3 的响应式系统主要依赖于 reactive 和 ref 这两个 API。

reactive: 用于将一个普通对象转换为响应式对象。对响应式对象的任何属性的访问和修改都会被追踪，并在数据发生变化时触发视图更新。
ref: 用于将一个值转换为响应式引用。它本质上是一个包含 .value 属性的对象，对 .value 的访问和修改会被追踪。ref 主要用于处理原始类型和需要手动控制响应性的情况。

咱们先来个简单的例子：

<template>
  <div>
    <p>Name: {{ state.name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const state = reactive({
  name: '李四',
  age: 25
});

const age = ref(20);

const updateData = () => {
  state.name = '王五';
  age.value = 30;
};
</script>

在这个例子里，state 是一个响应式对象，age 是一个响应式引用。当我们点击按钮时，state.name 和 age.value 都会被更新，视图也会自动更新。

三、正题：get 操作的拦截与依赖收集

现在，咱们来深入 Vue 3 源码，看看 Proxy 是如何在 get 操作中实现依赖收集的。

Vue 3 的响应式系统使用了 track 函数来进行依赖收集。当访问一个响应式对象的属性时，track 函数会被调用，将当前正在执行的 effect 函数（通常是组件的渲染函数）添加到该属性的依赖列表中。

以下是简化后的 track 函数的实现：

// effect 栈，用于存储当前正在执行的 effect 函数
const targetMap = new WeakMap(); // 存储目标对象与其属性的依赖关系

let activeEffect = null; // 当前正在执行的 effect 函数

function track(target, type, key) {
  if (!activeEffect) {
    return; // 如果没有正在执行的 effect 函数，则不进行依赖收集
  }
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

function trigger(target, type, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return; // 如果没有依赖项，则不触发更新
  }
  const dep = depsMap.get(key);
  if (!dep) {
    return; // 如果没有该属性的依赖项，则不触发更新
  }
  const effectsToRun = new Set();
  dep.forEach(effect => {
    if (effect !== activeEffect) {
      effectsToRun.add(effect);
    }
  });
  effectsToRun.forEach(effect => effect.run());
}

function effect(fn) {
    const effectFn = () => {
        cleanup(effectFn);
        activeEffect = effectFn;
        const result = fn();
        activeEffect = null;
        return result;
    };
    effectFn.deps = [];

    function cleanup(effectFn) {
      for(let i=0;i<effectFn.deps.length;i++){
        const dep = effectFn.deps[i];
        dep.delete(effectFn);
      }
      effectFn.deps.length = 0;
    }
    effectFn.run = fn;
    effectFn();
}

解释一下这段代码：

targetMap: 这是一个 WeakMap，用于存储目标对象与其属性的依赖关系。key 是目标对象，value 是一个 Map，这个 Map 的 key 是属性名，value 是一个 Set，存储了所有依赖该属性的 effect 函数。
activeEffect: 这是一个全局变量，用于存储当前正在执行的 effect 函数。在执行 effect 函数之前，activeEffect 会被设置为该 effect 函数，执行完毕后会被设置为 null。
track(target, type, key): 这个函数用于进行依赖收集。它接收三个参数：target（目标对象）、type（操作类型，例如 GET、SET 等）和 key（属性名）。如果 activeEffect 不为 null，则说明当前正在执行 effect 函数，会将 activeEffect 添加到 target 的 key 属性的依赖列表中。
trigger(target, type, key): 这个函数用于触发更新。当响应式对象的属性发生变化时，会调用 trigger 函数，它会找到该属性的所有依赖项，并执行这些依赖项对应的 effect 函数。
effect(fn): 这个函数用于创建一个 effect 函数。它接收一个函数 fn 作为参数，并将 fn 包装成一个 effect 函数。effect 函数会立即执行一次 fn，并在 fn 中访问到的响应式数据发生变化时，重新执行 fn。

现在，咱们来看看 Proxy 的 get 拦截器是如何使用 track 函数进行依赖收集的：

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);

    if (!isReadonly) {
      track(target, "get", key);
    }
    return res;
  };
}

这个 createGetter 函数返回一个 get 拦截器函数。当访问响应式对象的属性时，这个 get 拦截器函数会被调用。它首先使用 Reflect.get 获取属性值，然后调用 track 函数进行依赖收集，最后返回属性值。

四、ref 的自动解包（unwrap）

除了依赖收集之外，Proxy 的 get 拦截器还需要负责 ref 的自动解包。也就是说，当访问一个响应式对象的属性，并且该属性的值是一个 ref 时，get 拦截器需要自动返回 ref.value，而不是 ref 对象本身。

为了实现这个功能，我们需要在 get 拦截器中判断属性值是否是一个 ref，如果是，则返回 ref.value。

以下是修改后的 createGetter 函数的实现：

import { isRef } from './ref';

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);

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

    if (!isReadonly) {
      track(target, "get", key);
    }
    return res;
  };
}

在这个修改后的 createGetter 函数中，我们首先使用 isRef 函数判断属性值是否是一个 ref。如果是，则返回 res.value，否则返回 res。

isRef 函数的实现很简单：

export function isRef(value) {
  return !!(value && value.__v_isRef);
}

这个函数只是简单地判断对象是否具有 __v_isRef 属性，如果有，则说明它是一个 ref。

为了让 isRef 函数能够正常工作，我们需要在创建 ref 对象时，给它添加一个 __v_isRef 属性：

export function ref(value) {
  const refObject = {
    __v_isRef: true,
    get value() {
      track(refObject, "get", "value");
      return value;
    },
    set value(newValue) {
      value = newValue;
      trigger(refObject, "set", "value");
    }
  };
  return refObject;
}

在这个 ref 函数中，我们创建了一个包含 __v_isRef 属性的对象，并将 value 属性设置为一个 getter 和 setter。在 getter 中，我们调用 track 函数进行依赖收集，在 setter 中，我们调用 trigger 函数触发更新。

五、总结

现在，咱们来总结一下 Proxy 拦截器在 get 操作中是如何同时实现依赖收集和 ref 的自动解包的：

当访问响应式对象的属性时，Proxy 的 get 拦截器会被调用。
get 拦截器首先使用 Reflect.get 获取属性值。
get 拦截器判断属性值是否是一个 ref，如果是，则返回 ref.value。
get 拦截器调用 track 函数进行依赖收集。
get 拦截器返回属性值。

通过这种方式，Proxy 拦截器既实现了依赖收集，又实现了 ref 的自动解包，让 Vue 3 的响应式系统更加强大和易用。

六、代码示例：完整版

为了方便大家理解，我把完整的代码示例放在下面：

// reactivity.js
const targetMap = new WeakMap(); // 存储目标对象与其属性的依赖关系

let activeEffect = null; // 当前正在执行的 effect 函数

function track(target, type, key) {
  if (!activeEffect) {
    return; // 如果没有正在执行的 effect 函数，则不进行依赖收集
  }
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

function trigger(target, type, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return; // 如果没有依赖项，则不触发更新
  }
  const dep = depsMap.get(key);
  if (!dep) {
    return; // 如果没有该属性的依赖项，则不触发更新
  }
  const effectsToRun = new Set();
  dep.forEach(effect => {
    if (effect !== activeEffect) {
      effectsToRun.add(effect);
    }
  });
  effectsToRun.forEach(effect => effect.run());
}

function effect(fn) {
    const effectFn = () => {
        cleanup(effectFn);
        activeEffect = effectFn;
        const result = fn();
        activeEffect = null;
        return result;
    };
    effectFn.deps = [];

    function cleanup(effectFn) {
      for(let i=0;i<effectFn.deps.length;i++){
        const dep = effectFn.deps[i];
        dep.delete(effectFn);
      }
      effectFn.deps.length = 0;
    }
    effectFn.run = fn;
    effectFn();
}

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

function ref(value) {
  const refObject = {
    __v_isRef: true,
    get value() {
      track(refObject, "get", "value");
      return value;
    },
    set value(newValue) {
      value = newValue;
      trigger(refObject, "set", "value");
    }
  };
  return refObject;
}

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);

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

      track(target, "get", key);
      return res;
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, "set", key);
      return result;
    }
  });
}

// main.js
const state = reactive({
  name: '李四',
  age: ref(25)
});

effect(() => {
  console.log(`Name: ${state.name}, Age: ${state.age}`);
});

state.name = '王五';
state.age = 30;

在这个示例中，我们首先定义了 track、trigger、effect、isRef、ref 和 reactive 函数。然后，我们使用 reactive 函数创建了一个响应式对象 state，其中 age 属性是一个 ref。最后，我们使用 effect 函数创建了一个 effect 函数，用于打印 state.name 和 state.age。

当我们修改 state.name 和 state.age 时，effect 函数会自动重新执行，打印新的值。

七、进阶思考

shallowReactive 和 readonly: Vue 3 还提供了 shallowReactive 和 readonly 两个 API。shallowReactive 只会对对象的顶层属性进行响应式处理，而 readonly 会使对象变为只读的。你可以思考一下，如何在 createGetter 函数中添加对 shallow 和 isReadonly 的处理。
性能优化: 依赖收集和触发更新都需要消耗一定的性能。你可以思考一下，如何对依赖收集和触发更新进行优化，例如使用更高效的数据结构、减少不必要的更新等。
与 Composition API 的结合: Vue 3 的响应式系统与 Composition API 紧密结合。你可以尝试使用 Composition API 来编写更灵活和可维护的组件。

八、总结的总结

好了，今天的讲座就到这里。希望通过今天的讲解，大家对 Vue 3 的响应式系统有了更深入的理解。记住，理解源码是提升技术水平的关键，希望大家能够多多阅读源码，不断提升自己的技术能力！

如果大家有什么问题，欢迎在评论区留言，我会尽力解答。下次再见！

发表回复 取消回复

发表回复取消回复