各位掘友，大家好！我是你们的老朋友，今天要给大家带来一场关于 Vue 3 响应式系统核心 reactive 函数的深度剖析。咱们不搞虚的，直接撸代码，扒细节，保证你听完之后，对 Vue 3 的响应式理解更上一层楼。
一、开场白：响应式，Vue 的灵魂
咱们都知道，Vue 的核心特性之一就是响应式数据绑定。简单来说，就是数据一变，视图跟着变，反之亦然。这背后离不开 reactive 函数的功劳。它就像一个魔法棒，把普通 JavaScript 对象变成响应式对象，让数据拥有了“感知”变化的能力。
二、reactive 函数：表面功夫与内在乾坤
reactive 函数的职责很简单：将一个对象变成响应式对象。但是，它的实现却远比表面看起来复杂。咱们先来看看 reactive 的简化版核心代码：
import { isObject } from './utils';
import { mutableHandlers } from './baseHandlers';
export function reactive(target: object) {
return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(
target: object,
baseHandlers: ProxyHandler<any>
) {
if (!isObject(target)) {
return target; // 不是对象，直接返回
}
const existingProxy = reactiveMap.get(target);
if (existingProxy) {
return existingProxy; // 已经代理过，直接返回
}
const proxy = new Proxy(target, baseHandlers);
reactiveMap.set(target, proxy);
return proxy;
}
const reactiveMap = new WeakMap(); // 缓存已经代理过的对象
是不是感觉有点懵？别慌，咱们一步步来。
- 类型检查：
reactive函数接收一个target参数，首先判断它是不是对象。如果不是对象（比如数字、字符串），那就直接返回，毕竟这些基本类型不需要响应式。 - 缓存机制：
reactiveMap是一个WeakMap，用来缓存已经代理过的对象。如果target已经存在于reactiveMap中，说明它已经被代理过了，直接返回缓存的 Proxy 对象，避免重复代理。这是一种优化手段，可以提高性能。 - Proxy 登场：
new Proxy(target, baseHandlers)是核心。Proxy是 ES6 提供的代理对象，可以拦截对象的操作，比如读取、设置、删除属性等。baseHandlers是一个对象，包含了各种拦截器函数，定义了 Proxy 如何处理不同的操作。 - 缓存 Proxy： 将
target和对应的 Proxy 对象存入reactiveMap，方便下次使用。 - 返回 Proxy： 最终返回 Proxy 对象，这个对象就是响应式的。
三、baseHandlers：拦截器的集合
baseHandlers 是一个关键对象，它定义了 Proxy 如何拦截对象的各种操作。Vue 3 提供了 mutableHandlers 和 readonlyHandlers 两种 baseHandlers，分别用于处理可变对象和只读对象。咱们重点看看 mutableHandlers。
import { track, trigger } from './effect';
import { reactive, readonly } from './reactive';
import { isObject } from './utils';
const get = createGetter();
const set = createSetter();
const readonlyGet = createGetter(true);
const readonlySet = createSetter(true);
export const mutableHandlers = {
get,
set
};
export const readonlyHandlers = {
get: readonlyGet,
set: readonlySet
};
function createGetter(isReadonly = false) {
return function get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
if (!isReadonly) {
track(target, key); // 依赖收集
}
if (isObject(res)) {
// 嵌套对象或数组的响应式处理
return isReadonly ? readonly(res) : reactive(res);
}
return res;
};
}
function createSetter(isReadonly = false) {
return function set(target, key, value, receiver) {
if (isReadonly) {
console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
return true;
}
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key); // 触发更新
}
return result;
};
}
咱们来逐一分析：
get拦截器： 当访问响应式对象的属性时，get拦截器会被触发。它的作用是：Reflect.get(target, key, receiver)： 使用Reflect.get获取属性值，这是 ES6 推荐的做法，可以避免一些奇怪的问题。track(target, key)： 进行依赖收集。这是响应式系统的核心，它会将当前正在执行的 Effect 函数（比如组件的渲染函数）与被访问的属性关联起来。- 嵌套对象/数组的响应式处理： 如果属性值是一个对象或数组，那么需要递归地调用
reactive或readonly函数，将其也变成响应式对象。这是实现嵌套响应式的关键。 - 返回属性值。
set拦截器： 当设置响应式对象的属性时，set拦截器会被触发。它的作用是：Reflect.set(target, key, value, receiver)： 使用Reflect.set设置属性值。trigger(target, key)： 触发更新。当属性值发生改变时，它会通知所有依赖于该属性的 Effect 函数重新执行，从而更新视图。- 返回设置结果。
四、嵌套对象/数组的响应式转换：递归的艺术
Vue 3 的响应式系统可以处理嵌套的对象和数组，这是非常强大的。实现的关键就在于 get 拦截器中的递归调用 reactive 函数。
当访问一个响应式对象的属性时，如果属性值是一个对象或数组，get 拦截器会再次调用 reactive 函数，将这个对象或数组也变成响应式对象。这样，无论对象嵌套多深，都可以实现响应式。
举个例子：
const data = {
name: '张三',
address: {
city: '北京',
street: '长安街'
},
hobbies: ['吃饭', '睡觉', '打豆豆']
};
const reactiveData = reactive(data);
// 当访问 reactiveData.address.city 时，会触发两次 get 拦截器：
// 1. 访问 reactiveData.address，触发第一次 get 拦截器，将 address 对象变成响应式对象。
// 2. 访问 reactiveData.address.city，触发第二次 get 拦截器，返回 city 的值。
reactiveData.address.city = '上海'; // 触发更新
reactiveData.hobbies.push('看电影'); // 触发更新在这个例子中，address 对象和 hobbies 数组都会被递归地变成响应式对象，所以修改它们的属性都会触发更新。
五、track 和 trigger：依赖收集与触发更新
track 和 trigger 是响应式系统的两个核心函数，它们分别负责依赖收集和触发更新。
track函数： 当访问响应式对象的属性时，track函数会被调用，它会将当前正在执行的 Effect 函数（比如组件的渲染函数）与被访问的属性关联起来。这个关联关系存储在一个全局的依赖关系图中。trigger函数： 当设置响应式对象的属性时，trigger函数会被调用，它会从依赖关系图中找到所有依赖于该属性的 Effect 函数，并执行这些 Effect 函数，从而更新视图。
这两个函数的具体实现比较复杂，涉及到 Effect 函数、依赖关系图等概念，咱们这里不做深入讲解，后面有机会再详细介绍。
六、readonly：只读对象的守护者
除了 reactive 函数，Vue 3 还提供了 readonly 函数，用于创建只读对象。只读对象不能被修改，任何修改操作都会触发警告。
readonly 函数的实现与 reactive 函数类似，也是通过 Proxy 来拦截对象的各种操作。不同之处在于，readonly 函数使用的是 readonlyHandlers，而不是 mutableHandlers。
readonlyHandlers 中的 set 拦截器会阻止任何修改操作，并发出警告。
const data = {
name: '张三',
age: 18
};
const readonlyData = readonly(data);
readonlyData.name = '李四'; // 触发警告：Set operation on key "name" failed: target is readonly.七、总结：reactive 的核心逻辑
咱们来总结一下 reactive 函数的核心逻辑：
- 检查参数是否为对象，如果不是对象，直接返回。
- 检查是否已经代理过，如果已经代理过，直接返回缓存的 Proxy 对象。
- 使用
Proxy创建代理对象，baseHandlers定义了 Proxy 如何拦截对象的各种操作。 - 在
get拦截器中进行依赖收集，并将嵌套的对象/数组递归地变成响应式对象。 - 在
set拦截器中触发更新。 - 缓存 Proxy 对象，方便下次使用。
八、reactive 相关面试题
为了帮助大家巩固知识，这里给大家准备一些 reactive 相关的面试题：
reactive函数的作用是什么？Proxy是什么？它在reactive函数中起什么作用？baseHandlers是什么？Vue 3 提供了哪些baseHandlers？它们有什么区别？- 如何实现嵌套对象/数组的响应式转换？
track和trigger函数的作用是什么？readonly函数的作用是什么？它与reactive函数有什么区别？- 为什么要用
WeakMap作为缓存?Map可以吗?
九、写在最后：深入源码，才能理解本质
通过今天的讲解，相信大家对 Vue 3 的 reactive 函数有了更深入的理解。记住，深入源码是理解框架本质的最佳途径。希望大家能够继续探索 Vue 3 的源码，掌握更多核心技术，成为一名优秀的 Vue 开发者！
感谢大家的聆听！下次再见！