Vue 3 是一个用于构建用户界面的渐进式框架，其核心特性之一是响应式系统。响应式系统使得数据变化能够自动更新视图，而无需手动操作 DOM。本篇博客将详细介绍 Vue 3 的响应式原理，并逐步展示如何实现一个类似的响应式系统。
1. 什么是响应式
响应式编程是一种编程范式，通过数据流和变化传播简化开发。在响应式系统中，当数据发生变化时，相关的视图会自动更新。这种机制在构建动态用户界面时尤为重要，因为它减少了手动操作 DOM 的复杂度。
2. Vue 3 响应式系统概述
Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象和 Reflect API。Proxy 对象可以拦截并自定义对目标对象的基本操作（例如属性读取、赋值、删除等）。Reflect API 提供了与这些拦截操作相对应的默认行为，使代理操作更加直观和简洁。
2.1 核心概念
- Reactive Object: 使用 Proxy 包装的对象，能够自动追踪对其属性的访问和修改。
- Dependency Tracking: 在读取响应式对象的属性时，记录哪些依赖需要更新。
- Effect: 当依赖的属性发生变化时，触发对应的更新操作。
3. 基础实现
3.1 创建响应式对象
我们可以使用 Proxy 创建一个简单的响应式对象：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
console.log(`Getting ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`Setting ${key} to ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy(target, handler);
}
const state = reactive({ count: 0 });
console.log(state.count); // Getting count
state.count = 1; // Setting count to 1在这个简单的实现中，reactive 函数使用 Proxy 创建了一个响应式对象，并在属性读取和设置时打印日志。
3.2 解释代码
这里的 reactive 函数接受一个目标对象 target，并返回一个新的 Proxy 对象。Proxy 对象使用 handler 来拦截对目标对象的操作。在 handler 中，我们定义了 get 和 set 方法，用于处理属性的读取和赋值操作。
get方法：当读取属性时，会输出属性名，并通过Reflect.get获取属性值。set方法：当设置属性时，会输出属性名和新值，并通过Reflect.set设置属性值。
4. 代理对象的深入理解
4.1 处理基本数据类型
在实际应用中，我们通常处理的对象包含基本数据类型（如字符串、数字、布尔值等）。为了确保代理对象能够正确处理这些类型，我们需要在 reactive 函数中添加类型检查：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
console.log(`Getting ${key}: ${result}`);
return result;
},
set(target, key, value, receiver) {
console.log(`Setting ${key} to ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy(target, handler);
}
const state = reactive({ name: 'Vue', version: 3 });
console.log(); // Getting name: Vue
state.version = 4; // Setting version to 4通过这个实现，我们可以看到 reactive 函数不仅能够处理嵌套对象，还能处理基本数据类型。
5. 处理嵌套对象
5.1 递归处理嵌套对象
为了解决嵌套对象的问题，我们需要在读取属性时递归地将其转换为响应式对象：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
console.log(`Getting ${key}: ${result}`);
return reactive(result); // 递归处理嵌套对象
},
set(target, key, value, receiver) {
console.log(`Setting ${key} to ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy(target, handler);
}
const state = reactive({ nested: { count: 0 } });
console.log(state.nested.count); // Getting nested: [object Object], Getting count: 0
state.nested.count = 1; // Getting nested: [object Object], Setting count to 1现在，嵌套对象也会变成响应式的。
5.2 解释代码
在 get 方法中，我们使用 reactive 函数递归地将结果转换为响应式对象。这确保了无论对象嵌套层次多深，都能正确处理属性读取和设置。
6. 依赖收集与触发更新
为了实现响应式系统的核心功能，我们需要跟踪依赖关系，并在数据变化时触发更新。
6.1 创建依赖收集机制
我们可以使用一个全局的依赖容器来存储当前的副作用函数，并在属性读取时收集依赖：
let activeEffect = null;
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
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 trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
const deps = depsMap.get(key);
if (deps) {
deps.forEach(effect => effect());
}
}
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
track(target, key); // 收集依赖
return reactive(result); // 递归处理嵌套对象
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key); // 触发更新
}
return result;
}
};
return new Proxy(target, handler);
}
// 使用示例
const state = reactive({ count: 0 });
effect(() => {
console.log(`Count is: ${state.count}`);
});
state.count = 1; // 输出：Count is: 1
state.count = 2; // 输出：Count is: 26.2 解释代码
effect函数：用于注册副作用函数，执行并收集依赖。track函数：在读取属性时调用，收集依赖，将当前的副作用函数添加到依赖集合中。trigger函数：在设置属性时调用，触发所有依赖该属性的副作用函数。
7. 完整实现代码
结合上述所有步骤，我们可以得到一个完整的响应式系统实现：
let activeEffect = null;
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
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 trigger(target, key) {
const depsMap = targetMap.get(target
);
if (!depsMap) {
return;
}
const deps = depsMap.get(key);
if (deps) {
deps.forEach(effect => effect());
}
}
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
track(target, key);
return reactive(result);
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key);
}
return result;
}
};
return new Proxy(target, handler);
}
// 使用示例
const state = reactive({ count: 0, nested: { value: 10 } });
effect(() => {
console.log(`Count is: ${state.count}`);
});
effect(() => {
console.log(`Nested value is: ${state.nested.value}`);
});
state.count = 1; // 输出：Count is: 1
state.nested.value = 20; // 输出：Nested value is: 207.1 解释代码
reactive函数：接受一个目标对象，返回一个响应式的 Proxy 对象。handler对象：定义get和set方法，分别用于收集依赖和触发更新。effect函数：注册副作用函数，执行并收集依赖。
8. 实例应用与扩展
8.1 添加删除属性的响应式处理
在实际应用中，添加和删除属性也是常见操作。我们可以通过扩展 set 和 deleteProperty 方法来处理这些情况：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const handler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
track(target, key);
return reactive(result);
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key);
}
return result;
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key);
trigger(target, key);
return result;
}
};
return new Proxy(target, handler);
}
// 使用示例
const state = reactive({ count: 0 });
effect(() => {
console.log(`Count is: ${state.count}`);
});
state.count = 1; // 输出：Count is: 1
delete state.count; // 输出：Count is: undefined8.2 深入理解 WeakMap 的使用
WeakMap 是 JavaScript 中的一种集合类型，它允许我们使用对象作为键，并且不会阻止垃圾回收。由于 Vue 3 的响应式系统需要处理大量对象，WeakMap 非常适合用来存储对象的依赖关系。
9. 总结
本文详细介绍了 Vue 3 响应式系统的实现原理，并通过逐步实现展示了其核心机制。我们从基本的响应式对象创建开始，逐步增加对嵌套对象的处理，最终实现了完整的依赖收集与触发更新机制。理解这些原理不仅有助于深入掌握 Vue 3，还能帮助我们在其他项目中应用类似的响应式编程技术。
