大家好！今天我们来聊聊 Vue 3 源码里 Proxy 的那些事儿，特别是它在 get 操作中如何像个“瑞士军刀”一样，既干了依赖收集的活儿，又顺手把 ref 给解包了。
首先，咱们先得明白，Vue 3 为什么非得用 Proxy 这玩意儿？答案很简单：更强大，更灵活，性能更好！ 相比 Vue 2 用的 Object.defineProperty，Proxy 可以拦截的操作更多，比如可以拦截 in 操作，delete 操作，甚至 ownKeys 操作。这让 Vue 3 在响应式系统上有了更多的可能性。
1. Proxy 的基本结构
Proxy 的基本用法相信大家都了解，就是创建一个对象的代理，并指定一个 handler 对象，这个 handler 对象里定义了各种拦截操作，比如 get，set，has 等等。
const target = { name: '张三', age: 20 };
const handler = {
get(target, property, receiver) {
console.log(`Getting ${property}!`);
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {
console.log(`Setting ${property} to ${value}!`);
return Reflect.set(target, property, value, receiver);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出: Getting name! 张三
proxy.age = 25; // 输出: Setting age to 25!
console.log(target.age); // 输出: 25这段代码很简单，就是创建了一个 target 对象的 proxy，并且在 get 和 set 操作时打印一些信息。Reflect.get 和 Reflect.set 则是 ES6 提供的 API，它们可以更安全地进行属性访问和设置，避免一些奇怪的 this 指向问题。
2. Vue 3 的响应式系统核心：reactive 和 ref
在 Vue 3 里，响应式系统有两个核心 API：reactive 和 ref。
reactive: 用于将一个普通对象变成响应式对象。任何对响应式对象的属性的访问和修改都会被追踪，并在数据变化时触发视图更新。ref: 用于创建一个包含响应式值的对象。通常用于包装基本类型的值，例如数字、字符串、布尔值等，或者当我们需要更细粒度的控制响应式数据时使用。ref对象有一个.value属性，用于访问和修改内部的值。
import { reactive, ref, effect } from 'vue';
// reactive
const state = reactive({
count: 0
});
effect(() => {
console.log(`count is: ${state.count}`);
});
state.count++; // 输出: count is: 1
// ref
const message = ref('Hello Vue 3!');
effect(() => {
console.log(`message is: ${message.value}`);
});
message.value = 'Goodbye Vue 3!'; // 输出: message is: Goodbye Vue 3!这段代码演示了 reactive 和 ref 的基本用法。effect 函数用于创建一个副作用，当依赖的数据发生变化时，副作用函数会被重新执行。
3. 依赖收集：track 函数的功劳
Vue 3 使用 track 函数来进行依赖收集。简单来说，就是当我们在 effect 函数里访问响应式数据时，track 函数会把当前的 effect 函数（也就是副作用函数）添加到该响应式数据的依赖列表中。这样，当数据发生变化时，Vue 就能知道哪些 effect 函数需要重新执行。
// 简化的 track 函数
let activeEffect = null; // 当前激活的 effect 函数
function track(target, type, key) {
if (activeEffect) {
// 创建一个依赖关系表，用于存储 target, key 和对应的 effects
const depsMap = targetMap.get(target) || new Map();
targetMap.set(target, depsMap);
const dep = depsMap.get(key) || new Set();
depsMap.set(key, dep);
dep.add(activeEffect); // 将当前 effect 添加到依赖列表中
}
}
function trigger(target, type, key) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return; // 没有依赖
}
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect()); // 触发所有依赖的 effect 函数
}
}
const targetMap = new WeakMap(); // 用于存储 target 和 depsMap 的关系
function effect(fn) {
activeEffect = fn;
fn(); // 立即执行一次，进行依赖收集
activeEffect = null;
}
const data = reactive({ count: 0 });
effect(() => {
console.log(`count is: ${data.count}`);
});
data.count++; // 触发 trigger 函数，重新执行 effect 函数这段代码模拟了一个简化的 track 和 trigger 函数。activeEffect 变量用于存储当前激活的 effect 函数。当我们在 effect 函数里访问 data.count 时，track 函数会被调用，并将当前的 effect 函数添加到 data.count 的依赖列表中。当 data.count 的值发生变化时，trigger 函数会被调用，并重新执行所有依赖的 effect 函数。
4. ref 的自动解包（unwrap）：让使用更方便
ref 的一个重要特性就是自动解包。也就是说，当我们在模板中使用 ref 对象时，Vue 会自动把 .value 属性的值取出来，让我们不用手动写 .value。这让模板代码更简洁，更易读。
例如：
<template>
<div>
<p>Count: {{ count }}</p> <!-- 不需要写 count.value -->
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>在上面的例子中，我们在模板中直接使用 count，而不需要写 count.value。Vue 会自动帮我们解包。
5. Proxy 在 get 操作中的实现：既依赖收集，又自动解包
现在，我们来重点看看 Vue 3 源码里，Proxy 在 get 操作中是如何实现依赖收集和自动解包的。
import { isObject, hasOwn, isSymbol } from '@vue/shared'
import { track, trigger } from './effect'
import { ReactiveFlags, reactive, isReadonly, toRaw } from './reactive'
import { isRef, unref } from './ref'
const get = /*#__PURE__*/ createGetter()
const readonlyGet = /*#__PURE__*/ createGetter(true)
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)
function createGetter(isReadonly = false, shallow = false) {
return function get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadonly
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly
} else if (key === ReactiveFlags.RAW &&
receiver === reactiveMap.get(target) ||
receiver === readonlyMap.get(target) ||
receiver === shallowReadonlyMap.get(target)
) {
return target
}
const targetIsArray = Array.isArray(target)
if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
return Reflect.get(arrayInstrumentations, key, receiver)
}
const res = Reflect.get(target, key, receiver)
if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
return res
}
if (!isReadonly) {
track(target, "get" /* GET */, key)
}
if (shallow) {
return res
}
if (isRef(res)) {
// ref unwrapping - does not apply for Array + integer key.
return targetIsArray && Number.isInteger(key) ? res : res.value
}
if (isObject(res)) {
// Convert returned value into a reactive value.
return isReadonly ? readonly(res) : reactive(res)
}
return res
}
}我们来分析一下这段代码：
-
首先，它定义了一个
createGetter函数，用于创建get拦截器。 这个函数接收两个参数：isReadonly和shallow。isReadonly表示是否是只读的，shallow表示是否是浅层的。 -
在
get拦截器内部，首先会检查一些特殊的key。ReactiveFlags.IS_REACTIVE: 用于判断一个对象是否是响应式对象。ReactiveFlags.IS_READONLY: 用于判断一个对象是否是只读对象。ReactiveFlags.RAW: 用于获取原始对象（也就是没有被Proxy代理的对象）。
-
如果目标对象是数组，并且访问的是数组的一些特殊方法（比如
push，pop等），则会从arrayInstrumentations对象中获取对应的方法。 这是为了优化数组的操作。 -
然后，使用
Reflect.get获取属性的值。 -
如果访问的是 Symbol 类型的属性，或者是一些不需要追踪的属性，则直接返回属性值。
-
如果不是只读的，则调用
track函数进行依赖收集。 这是关键的一步，它把当前的effect函数添加到该属性的依赖列表中。 -
如果是浅层的，则直接返回属性值。
-
如果属性值是一个
ref对象，则进行自动解包。 这里会判断目标对象是否是数组，并且访问的key是否是整数。如果是数组，并且访问的是整数类型的key，则不进行解包。这是为了避免在数组中使用ref时出现意外的行为。 -
如果属性值是一个对象，则递归地将该对象转换成响应式对象或只读对象。
-
最后，返回属性值。
所以，我们可以看到，Proxy 的 get 拦截器承担了两个重要的任务：
- 依赖收集： 通过
track函数，将当前的effect函数添加到依赖列表中。 - 自动解包： 如果属性值是一个
ref对象，则自动解包，返回.value属性的值。
6. 为什么数组的整数索引不解包 ref？
这是一个重要的细节，值得单独拿出来讨论。 如果我们在数组中使用 ref，并且访问的是整数索引，那么 Vue 不会自动解包 ref。 这是为了避免一些潜在的问题。
例如：
import { ref, reactive, effect } from 'vue';
const arr = reactive([ref(1), ref(2), ref(3)]);
effect(() => {
console.log(arr[0]); // 输出: RefImpl { _rawValue: 1, _shallow: false, dep: undefined, __v_isRef: true, value: 1 }
});
arr[0].value = 10; // 输出: RefImpl { _rawValue: 10, _shallow: false, dep: Set(1), __v_isRef: true, value: 10 }
const obj = reactive({ a: ref(1) });
effect(() => {
console.log(obj.a); // 输出: 1
});
obj.a.value = 2; // 输出: 2可以看到，当我们访问 arr[0] 时，输出的是 ref 对象本身，而不是 ref 对象的值。 而当我们访问 obj.a 时，输出的是 ref 对象的值。
这是因为，如果 Vue 自动解包数组的整数索引，那么我们可能无法直接修改 ref 对象的值。 例如，如果我们想把 arr[0] 替换成一个新的 ref 对象，就无法直接赋值了。 我们需要先获取 arr[0] 的 ref 对象，然后修改它的 value 属性。
此外，数组的整数索引也可能被用于其他目的，例如访问数组的长度，或者进行一些特殊的数组操作。 如果 Vue 自动解包数组的整数索引，可能会导致一些意外的行为。
因此，Vue 选择不自动解包数组的整数索引，而是让开发者手动解包 ref 对象的值。 这样可以提供更大的灵活性和控制权。
7. 总结
今天我们深入探讨了 Vue 3 源码中 Proxy 在 get 操作中的实现。 我们了解到，Proxy 的 get 拦截器承担了两个重要的任务：依赖收集和自动解包。 依赖收集是通过 track 函数实现的，它把当前的 effect 函数添加到依赖列表中。 自动解包是通过判断属性值是否是 ref 对象，如果是，则返回 .value 属性的值来实现的。 同时，我们也讨论了为什么 Vue 不会自动解包数组的整数索引。
希望今天的讲解能够帮助大家更好地理解 Vue 3 的响应式系统，并在实际开发中更加得心应手！感谢大家的聆听！