探讨 Vue 3 源码中 `ref` 自动解包（`unwrap`）的实现机制，以及它在 `Proxy` 拦截器中的具体逻辑。

大家好，欢迎来到今天的源码漫游奇妙之旅！今天我们要啃的是 Vue 3 源码里一块非常美味，但又容易让人迷糊的骨头：ref 的自动解包（unwrap）。

准备好了吗？坐稳扶好，咱们要开车了！

一、ref：Vue 世界里的“小金库”

首先，让我们简单复习一下 ref 是个啥。在 Vue 3 中，ref 可以理解为一个“小金库”，专门用来存放响应式数据。 你往里面存任何东西，Vue 都能实时追踪它的变化。

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出：0

count.value++;

console.log(count.value); // 输出：1 (并且视图也会同步更新)

可以看到，我们需要通过 .value 才能访问 ref 内部的值。这就像打开小金库，取出里面的宝贝一样。

二、unwrap：自动开锁的“钥匙”

那么，unwrap 又是啥？简单来说，它就是一把“自动开锁的钥匙”。 Vue 在某些情况下会自动帮你把 ref 的 .value 给取出来，让你直接访问到内部的值，而不用每次都 .value 个不停。

<template>
  <div>{{ count }}</div>  <!-- 这里可以直接使用 count，而不用 count.value -->
</template>

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

const count = ref(0);
</script>

在上面的例子中，虽然 count 是一个 ref，但在 template 里，我们可以直接用 count，而不用 count.value。 这就是 unwrap 的功劳。

三、 Proxy：拦截所有“进出”流量的“门卫”

要理解 unwrap 的实现机制，我们不得不提到 Proxy。 在 Vue 3 的响应式系统中，Proxy 扮演着“门卫”的角色。 任何对响应式数据的访问和修改，都要经过 Proxy 这道关卡。

Proxy 允许我们拦截对一个对象的各种操作，比如读取属性、设置属性、删除属性等等。 通过定义不同的“陷阱”（traps），我们可以自定义这些操作的行为。

四、reactive：创建响应式对象的“工厂”

在深入 unwrap 之前，我们先来了解一下 reactive 函数，这个函数是创建响应式对象的“工厂”。它会递归地将对象转换为响应式对象，包括对象内部的 ref。

import { reactive, ref } from 'vue';

const state = reactive({
  name: 'Vue',
  version: ref(3)
});

console.log(state.name); // 输出：Vue
console.log(state.version); // 输出：{ value: 3 }  // 这里是 ref 对象本身
console.log(state.version.value); // 输出：3

可以看到，reactive 创建的响应式对象，内部的 ref 并没有自动解包。我们需要手动访问 .value。

五、shallowReactive：只处理第一层的“懒人工厂”

与 reactive 相对的是 shallowReactive。它只对对象的第一层进行响应式处理，而不会递归处理内部的 ref。

import { shallowReactive, ref } from 'vue';

const state = shallowReactive({
  name: 'Vue',
  version: ref(3)
});

console.log(state.name); // 输出：Vue
console.log(state.version); // 输出：{ value: 3 }  // 这里是 ref 对象本身
console.log(state.version.value); // 输出：3

shallowReactive 的性能比 reactive 更好，因为它不需要递归处理所有属性。 但也意味着它内部的 ref 不会自动解包。

六、toRefs：将响应式对象转换成包含 ref 的普通对象

toRefs 函数可以将一个响应式对象转换成一个普通对象，该对象的每个属性都是指向原始响应式对象相应属性的 ref。

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: 'Vue',
  version: 3
});

const refs = toRefs(state);

console.log(refs.name.value); // 输出：Vue
console.log(refs.version.value); // 输出：3

state.name = 'Vue 3';
console.log(refs.name.value); // 输出：Vue 3  (响应式更新)

toRefs 的主要用途是将响应式对象的属性暴露给 template 或其他组件，同时保持响应性。

七、isRef：判断一个值是否为 ref

在实现 unwrap 逻辑时，我们需要判断一个值是否为 ref。 Vue 提供了 isRef 函数来完成这个任务。

import { ref, isRef } from 'vue';

const count = ref(0);
const name = 'Vue';

console.log(isRef(count)); // 输出：true
console.log(isRef(name)); // 输出：false

八、customRef：自定义 ref 的行为

customRef 允许我们自定义 ref 的行为，例如控制何时触发更新。

import { customRef } from 'vue';

function useDebouncedRef(value, delay) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    };
  });
}

// 使用示例
import { ref, watch } from 'vue';
const debouncedValue = useDebouncedRef('', 500);
const immediateValue = ref('');

watch(debouncedValue, (newValue) => {
  immediateValue.value = newValue;
});

九、shallowRef：创建一个非深度响应式的 ref

shallowRef 创建一个 ref，但它只追踪 .value 的变化，而不会递归地追踪 .value 内部属性的变化。这可以提高性能，但需要注意其局限性。

import { shallowRef } from 'vue';

const obj = shallowRef({ name: 'Vue', version: 3 });

// 改变 obj.value 本身会触发更新
obj.value = { name: 'Vue 3', version: 3 }; // 触发更新

// 改变 obj.value 的属性不会触发更新
obj.value.name = 'Vue 3'; // 不会触发更新

十、triggerRef：手动触发 ref 的更新

有时候，我们需要手动触发 ref 的更新。 triggerRef 函数可以完成这个任务。

import { ref, triggerRef } from 'vue';

const count = ref(0);

// ... 某些操作，可能导致 count.value 发生变化，但 Vue 没有检测到

triggerRef(count); // 手动触发更新

十一、源码剖析：reactive、readonly、shallowReactive、shallowReadonly 的 Proxy 拦截器

接下来，我们深入 Vue 3 源码，看看 reactive、readonly、shallowReactive、shallowReadonly 在 Proxy 拦截器中是如何实现 unwrap 的。

首先，我们关注 get 陷阱。 当访问对象的属性时，get 陷阱会被触发。

// packages/reactivity/src/reactive.ts

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // ... 省略其他代码

  return new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
}

const mutableHandlers: ProxyHandler<object> = {
  get(target: object, key: string | symbol, receiver: object) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return true
    } else if (key === ReactiveFlags.IS_READONLY) {
      return false
    } else if (key === ReactiveFlags.RAW &&
      receiver === reactiveMap.get(target)) {
      return target;
    }

    return Reflect.get(target, key, receiver);
  },
  // ... 省略其他代码
}

const readonlyHandlers: ProxyHandler<object> = {
  get(target: object, key: string | symbol, receiver: object) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return false
    } else if (key === ReactiveFlags.IS_READONLY) {
      return true
    } else if (key === ReactiveFlags.RAW &&
      receiver === readonlyMap.get(target)) {
      return target;
    }

    return Reflect.get(target, key, receiver);
  },
  set(target: object, key: string | symbol, value: any, receiver: object): boolean {
    // ... 省略错误提示代码
    return true
  },
  deleteProperty(target: object, key: string | symbol): boolean {
    // ... 省略错误提示代码
    return true
  }
}

const shallowReactiveHandlers: ProxyHandler<object> = {
  get(target: object, key: string | symbol, receiver: object) {
     if (key === ReactiveFlags.IS_REACTIVE) {
      return true
    } else if (key === ReactiveFlags.IS_READONLY) {
      return false
    } else if (key === ReactiveFlags.RAW &&
      receiver === shallowReactiveMap.get(target)) {
      return target;
    }
    return Reflect.get(target, key, receiver);
  },
  set(target: object, key: string | symbol, value: any, receiver: object): boolean {
    return true
  },
  deleteProperty(target: object, key: string | symbol): boolean {
    return true
  }
}

const shallowReadonlyHandlers: ProxyHandler<object> = {
  get(target: object, key: string | symbol, receiver: object) {
     if (key === ReactiveFlags.IS_REACTIVE) {
      return false
    } else if (key === ReactiveFlags.IS_READONLY) {
      return true
    } else if (key === ReactiveFlags.RAW &&
      receiver === shallowReadonlyMap.get(target)) {
      return target;
    }
    return Reflect.get(target, key, receiver);
  },
  set(target: object, key: string | symbol, value: any, receiver: object): boolean {
    // ... 省略错误提示代码
    return true
  },
  deleteProperty(target: object, key: string | symbol): boolean {
    // ... 省略错误提示代码
    return true
  }
}

这些 Handler 中没有 unwrap 的逻辑，所以需要手动 .value 访问 ref 的值。

十二、effect 与 ref 的自动解包

effect 函数是 Vue 3 响应式系统的核心之一。它可以自动追踪依赖，并在依赖发生变化时重新执行。在 effect 函数内部，Vue 会自动解包 ref。

import { effect, ref } from 'vue';

const count = ref(0);

effect(() => {
  console.log('count 的值为：', count.value); // 这里需要 .value
});

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

在 effect 函数内部，Vue 会自动追踪 count.value 的依赖。当 count.value 发生变化时，effect 函数会重新执行，并打印新的值。

十三、computed 与 ref 的自动解包

computed 函数用于创建计算属性。计算属性的值会根据其依赖自动更新。在 computed 函数内部，Vue 也会自动解包 ref。

import { computed, ref } from 'vue';

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2; // 这里需要 .value
});

console.log('doubleCount 的值为：', doubleCount.value); // 输出：0

count.value++; // 触发 doubleCount 重新计算

console.log('doubleCount 的值为：', doubleCount.value); // 输出：2

在 computed 函数内部，Vue 会自动追踪 count.value 的依赖。当 count.value 发生变化时，computed 函数会重新计算，并返回新的值。

十四、模板中的 ref 自动解包

在 Vue 模板中，ref 会自动解包。这意味着我们可以直接使用 ref 的值，而不需要手动访问 .value。

<template>
  <div>{{ count }}</div>  <!-- 这里可以直接使用 count，而不用 count.value -->
</template>

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

const count = ref(0);
</script>

Vue 编译器在编译模板时，会自动将 ref 解包。

十五、总结：ref 自动解包的场景

总的来说，ref 的自动解包主要发生在以下场景：

• 模板中：在 Vue 模板中，ref 会自动解包。
• effect 函数内部：在 effect 函数内部，Vue 会自动解包 ref。
• computed 函数内部：在 computed 函数内部，Vue 也会自动解包 ref。

在其他情况下，我们需要手动访问 ref 的 .value 属性。

好了，今天的 Vue 3 源码漫游之旅就到这里。希望通过今天的讲解，大家对 ref 的自动解包机制有了更深入的了解。 记住， 理解源码是成为 Vue 高手的必经之路！ 咱们下期再见！