一、理解响应式的核心：数据变了，视图自动跟着变
想象一下，你在管理一个仪表盘，上面显示着公司的实时销售额。你希望，每当后台的销售数据更新时，仪表盘上的数字和图表能自动、即时地刷新，而不需要你手动去点击一个“更新”按钮。这种“数据驱动视图”的自动联动机制，就是前端框架中“响应式”系统的精髓。
在 Vue 的世界里，你只需要在模板中声明视图依赖哪些数据，当这些数据发生变化时，Vue 便会自动、高效地重新计算并更新相关的视图部分。这个过程对开发者几乎是透明的，我们只需关心数据本身，极大地提升了开发效率和代码的可维护性。那么，Vue 是如何实现这种“魔法”的呢？其核心在于对 JavaScript 对象属性的“侦测”。Vue 2.x 和 Vue 3.x 分别采用了不同的技术来实现这个侦测：Object.defineProperty 和 Proxy。接下来，我们将深入这两者的原理。
二、Vue 2 的基石：基于 Object.defineProperty 的响应式
Vue 2 的响应式系统是构建在 ES5 的 Object.defineProperty API 之上的。这个 API 允许我们精确地定义或修改一个对象的属性，并可以控制这个属性的读取（get）和设置（set）行为。
2.1 核心原理：Getter 与 Setter
简单来说，Vue 在初始化一个组件时，会遍历我们定义在 data 函数返回对象中的所有属性，并使用 Object.defineProperty 将它们全部转换为“访问器属性”（即拥有 getter 和 setter 的属性）。
- Getter（依赖收集）：当视图中的表达式（如
{{ message }}）或计算属性读取这个数据时，就会触发 getter。此时，Vue 会记录下“当前正在执行的渲染函数或计算属性”依赖于“这个数据”。这个过程叫做“依赖收集”。 - Setter（触发更新）：当我们修改这个数据时（例如
this.message = ‘new value’），就会触发 setter。此时，Vue 会通知所有之前收集到的、依赖于这个数据的“观察者”（Watcher）：“你们依赖的数据变了，快去更新自己！”。这些观察者就会重新执行，从而更新视图或重新计算。
下面这个简化的例子模拟了 Vue 2 响应式的核心思想：
技术栈：JavaScript (ES5)
// 模拟一个 Vue 实例的 data 对象
let data = { message: 'Hello Vue 2' };
// 存储所有依赖（观察者）的“仓库”， key 是属性名， value 是依赖该属性的函数列表
let dep = {};
// 遍历 data 的每个 key，将其转换为响应式
Object.keys(data).forEach(key => {
let internalValue = data[key]; // 内部存储的真实值
// 为这个属性初始化一个依赖列表
dep[key] = [];
Object.defineProperty(data, key, {
// Getter： 读取时触发
get() {
console.log(`读取了属性 ${key}: ${internalValue}`);
// 模拟依赖收集：假设有一个全局变量 `currentWatcher` 指向当前正在执行的函数
if (window.currentWatcher && !dep[key].includes(window.currentWatcher)) {
dep[key].push(window.currentWatcher);
console.log(` 收集到依赖: ${window.currentWatcher.name}`);
}
return internalValue;
},
// Setter： 设置时触发
set(newValue) {
if (internalValue !== newValue) {
console.log(`设置了属性 ${key}: 从 ${internalValue} 变为 ${newValue}`);
internalValue = newValue;
// 触发更新：通知所有依赖此属性的函数
dep[key].forEach(watcherFn => {
console.log(` 通知更新: ${watcherFn.name}`);
watcherFn(); // 执行更新函数
});
}
}
});
});
// 模拟一个依赖于 data.message 的渲染函数（观察者）
function renderMessage() {
console.log(`视图渲染：消息是 ${data.message}`);
}
// 模拟一个计算属性
function computedUpperMessage() {
console.log(`计算属性：大写消息是 ${data.message.toUpperCase()}`);
}
// 开始依赖收集
console.log('--- 首次渲染，触发依赖收集 ---');
window.currentWatcher = renderMessage;
renderMessage(); // 触发 getter，收集 renderMessage 作为依赖
window.currentWatcher = computedUpperMessage;
computedUpperMessage(); // 触发 getter，收集 computedUpperMessage 作为依赖
window.currentWatcher = null; // 收集完毕
console.log('\n--- 修改数据，触发更新 ---');
// 修改数据，触发 setter
data.message = 'Hello World';
这个例子清晰地展示了 get 时收集谁在用我，set 时通知收集到的依赖进行更新的过程。
2.2 应用场景与局限性
这种基于 Object.defineProperty 的方案在 Vue 2 时期非常成功，但它存在一些固有的限制：
- 对象新增/删除属性：
Object.defineProperty只能对现有属性进行侦测。如果你通过data.obj.newKey = ‘value’的方式给一个响应式对象添加新属性，或者使用delete删除属性，Vue 2 是无法侦测到的。为此，Vue 提供了Vue.set和Vue.delete这两个 API 作为解决方案。 - 数组索引和长度修改：直接通过索引设置数组项（如
arr[0] = newValue）或修改arr.length同样无法被侦测。Vue 2 通过重写数组的 7 个变更方法（push,pop,shift,unshift,splice,sort,reverse）来弥补这一缺陷。
三、Vue 3 的进化：基于 Proxy 的响应式
Vue 3 采用了 ES6 的 Proxy 来重构其响应式系统。Proxy 可以创建一个对象的代理，从而拦截并定义该对象的基本操作，功能比 Object.defineProperty 强大得多。
3.1 核心原理：拦截整个对象
Proxy 不需要遍历对象属性并逐个定义 getter/setter，而是直接给整个目标对象包裹一层“拦截层”。任何对目标对象属性的访问（get）、赋值（set）、删除（deleteProperty）等操作，都会先经过这个拦截层的处理。
- 依赖收集：在
get拦截操作中，记录当前活跃的副作用函数（类似于 Vue 2 的 Watcher）与当前访问的属性之间的依赖关系。 - 触发更新：在
set、deleteProperty等拦截操作中，找到所有依赖于被修改属性的副作用函数，并触发它们重新执行。
让我们用 Proxy 来重写上文的例子：
技术栈：JavaScript (ES6)
// 存储所有依赖关系的“仓库”，使用 WeakMap 和 Map 来建立 对象 -> 属性 -> 依赖集合 的映射
const targetMap = new WeakMap();
// 当前活跃的副作用函数
let activeEffect = null;
// 依赖收集函数
function track(target, key) {
if (!activeEffect) return;
// 从 targetMap 中获取当前对象的依赖映射（depsMap），如果没有则创建
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
// 从 depsMap 中获取当前属性的依赖集合（dep），如果没有则创建
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
// 将当前活跃的副作用函数添加到依赖集合中
dep.add(activeEffect);
console.log(`[Track] 对象 ${target.constructor.name} 的属性 "${key}" 收集到依赖: ${activeEffect.name}`);
}
// 触发更新函数
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
console.log(`[Trigger] 对象 ${target.constructor.name} 的属性 "${key}" 触发更新，通知以下依赖:`);
dep.forEach(effect => {
console.log(` -> ${effect.name}`);
effect(); // 执行副作用函数
});
}
}
// 创建响应式对象的函数（简化版 reactive）
function reactive(target) {
return new Proxy(target, {
// 拦截读取操作
get(obj, key) {
console.log(`[Get] 读取属性 ${key}: ${obj[key]}`);
track(obj, key); // 依赖收集
return obj[key];
},
// 拦截设置操作
set(obj, key, value) {
console.log(`[Set] 设置属性 ${key}: 从 ${obj[key]} 变为 ${value}`);
const oldValue = obj[key];
obj[key] = value;
if (oldValue !== value) {
trigger(obj, key); // 触发更新
}
return true;
},
// 拦截删除操作
deleteProperty(obj, key) {
console.log(`[Delete] 删除属性 ${key}`);
if (obj.hasOwnProperty(key)) {
delete obj[key];
trigger(obj, key); // 触发更新
return true;
}
return false;
}
});
}
// 副作用函数注册器（简化版 effect）
function effect(fn) {
activeEffect = fn;
fn(); // 首次执行，触发 get 进行依赖收集
activeEffect = null;
}
// 使用示例
const state = reactive({ message: 'Hello Vue 3', count: 0 });
// 定义副作用函数1：渲染消息
function renderMessage() {
console.log(`视图渲染：消息是 ${state.message}`);
}
// 定义副作用函数2：计算计数平方
function renderSquare() {
console.log(`视图渲染：计数的平方是 ${state.count * state.count}`);
}
console.log('--- 首次执行，建立依赖关系 ---');
effect(renderMessage);
effect(renderSquare);
console.log('\n--- 修改已有属性 ---');
state.message = 'Hello Proxy'; // 触发 set， 仅通知 renderMessage
state.count = 5; // 触发 set， 仅通知 renderSquare
console.log('\n--- 动态添加新属性 ---');
state.newKey = 'Dynamic!'; // 触发 set， 因为 Proxy 拦截了整个对象，所以能侦测到！
console.log('\n--- 删除属性 ---');
delete state.count; // 触发 deleteProperty， 通知 renderSquare
可以看到，Proxy 方案完美解决了 Vue 2 的局限性，对属性的增删改查都能进行有效拦截。
3.2 技术优缺点与注意事项
优点：
- 全面的拦截能力：支持对象和数组的索引操作、
length修改、属性的添加和删除。 - 更好的性能：
Proxy是浏览器原生提供的功能，通常比Object.defineProperty的遍历定义方式更高效，尤其在初始化大型对象时。 - 更简洁的实现：无需像 Vue 2 那样对数组方法进行重写，也无需提供
Vue.set/delete这样的特殊 API（在reactive作用域内）。
注意事项：
- 浏览器兼容性：
Proxy无法被完全 polyfill，因此 Vue 3 放弃了对 IE11 的支持（Vue 2 的最后一个版本仍支持 IE11）。 - 响应式对象与原始对象：
reactive()返回的是原始对象的 Proxy 代理，它们不相等。直接操作原始对象不会触发响应式更新。 - 深层响应式：
reactive()是“深层”的，它会递归地将所有嵌套对象也转换为响应式。如果只需要浅层响应式，可以使用shallowReactive()。
四、总结
Vue 的响应式原理是其框架灵魂所在。Vue 2 通过 Object.defineProperty 的 getter/setter 实现了经典的响应式模型，虽然存在对数组和动态属性支持的局限，但通过配套的 API 和数组方法重写提供了完整的解决方案。Vue 3 则借助更强大的 Proxy，实现了更直观、更全面、性能也往往更优的响应式系统，标志着前端响应式编程进入了一个新的阶段。
理解这两种实现方式的异同，不仅能帮助我们在不同版本的 Vue 项目中游刃有余，更能深刻理解“数据驱动视图”这一现代前端核心思想背后的技术脉络。无论是面对遗留的 Vue 2 项目，还是拥抱全新的 Vue 3 生态，这份对原理的理解都是开发者宝贵的财富。
Comments