各位观众，掌声欢迎！今天我们来聊聊 Vue 2 响应式系统的核心之一：Object.defineProperty，以及它的 getter 和 setter 是如何巧妙地参与依赖收集和派发更新的。准备好，我们要深入“敌后”，扒一扒 Vue 2 的底裤了！
第一幕：响应式系统的基石 – Object.defineProperty
在 Vue 2 时代，响应式系统是基于 Object.defineProperty 实现的。 这家伙能让我们拦截对象属性的读取和设置操作，从而在数据发生变化时，做出一些“不可告人”的事情，比如更新视图。
我们先来回顾一下 Object.defineProperty 的基本用法：
const obj = {};
let value = 'initial value';
Object.defineProperty(obj, 'myProp', {
get() {
console.log('Getting myProp');
return value;
},
set(newValue) {
console.log('Setting myProp to', newValue);
value = newValue;
},
enumerable: true, // 可枚举
configurable: true // 可配置
});
console.log(obj.myProp); // 输出: Getting myProp, initial value
obj.myProp = 'new value'; // 输出: Setting myProp to new value
console.log(obj.myProp); // 输出: Getting myProp, new value这段代码展示了如何使用 get 和 set 拦截属性的读取和设置。 这就像给 myProp 这个属性安装了两个摄像头，一个对着读，一个对着写，一旦有任何动静，我们都能知道。
第二幕：依赖收集 – getter 的秘密行动
Vue 的响应式系统需要知道哪些地方用到了某个数据，这样数据更新时才能通知到它们。 这就是依赖收集，而 getter 在其中扮演着至关重要的角色。
为了更好地理解，我们先定义一些关键角色：
Dep(Dependency): 依赖，每个响应式属性都有一个Dep对象，用于存储所有依赖于该属性的Watcher。 你可以把它想象成一个“粉丝俱乐部”，专门记录谁喜欢这个属性。Watcher: 观察者，当数据发生变化时，Watcher会收到通知并执行相应的更新操作。Watcher就像粉丝俱乐部的会员，一旦偶像（数据）有任何风吹草动，他们都会第一时间得到通知。target: 一个全局变量，指向当前正在执行的Watcher。 这就像一个“当前活动粉丝”的指针，方便我们知道谁正在读取响应式属性。
现在，让我们看看 getter 在依赖收集中的作用：
class Dep {
constructor() {
this.subs = []; // 存储订阅者 (Watcher)
}
depend() {
if (Dep.target && !this.subs.includes(Dep.target)) {
this.subs.push(Dep.target); // 将当前 Watcher 添加到订阅者列表中
}
}
notify() {
this.subs.forEach(watcher => watcher.update()); // 通知所有订阅者更新
}
}
// 静态属性，用于存储当前正在计算的 Watcher
Dep.target = null;
// 模拟 Watcher
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.getter = expOrFn; // 获取值的函数
this.cb = cb; // 回调函数，用于更新
this.value = this.get(); // 初始化，触发依赖收集
}
get() {
Dep.target = this; // 设置当前激活的 Watcher
const value = this.getter.call(this.vm, this.vm); // 读取值，触发 getter
Dep.target = null; // 清空当前激活的 Watcher
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue); // 执行回调
}
}
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get() {
console.log(`Getting ${key}`);
dep.depend(); // 依赖收集
return val;
},
set(newVal) {
if (newVal === val) {
return;
}
console.log(`Setting ${key} to`, newVal);
val = newVal;
dep.notify(); // 派发更新
},
enumerable: true,
configurable: true
});
}
// 示例
const data = { name: 'Vue', age: 3 };
const vm = {}; // 模拟 Vue 实例
Object.keys(data).forEach(key => {
defineReactive(vm, key, data[key]);
});
// 创建一个 Watcher，监听 vm.name
const watcher = new Watcher(vm, function() { return this.name; }, function(newValue, oldValue) {
console.log(`name updated from ${oldValue} to ${newValue}`);
});
vm.name = 'Vue.js'; // 触发 setter，派发更新让我们逐行分析关键代码：
-
defineReactive(obj, key, val): 这个函数将对象的属性转换为响应式属性。它会创建一个Dep实例，并使用Object.defineProperty定义getter和setter。 -
getter:console.log(Getting ${key}`);`: 这是一个调试语句，方便我们观察属性被读取的时机。dep.depend();: 这是依赖收集的关键步骤。当getter被调用时，会执行dep.depend()方法。
-
dep.depend():if (Dep.target && !this.subs.includes(Dep.target)): 首先判断Dep.target是否存在，以及当前的Watcher是否已经存在于subs数组中。Dep.target只有在Watcher正在执行get()方法时才会被设置。this.subs.push(Dep.target);: 如果Dep.target存在且不在subs数组中，则将当前的Watcher添加到subs数组中。 这样，Dep就知道这个Watcher依赖于这个属性。
-
Watcher:new Watcher(vm, function() { return this.name; }, function(newValue, oldValue) { ... });: 创建了一个Watcher实例，用于监听vm.name属性的变化。this.get(): 在Watcher的构造函数中，会立即调用this.get()方法，触发依赖收集。Dep.target = this;: 在this.get()方法中，首先将Dep.target设置为当前的Watcher实例。 这表示当前正在执行的Watcher是这个Watcher。const value = this.getter.call(this.vm, this.vm);: 然后调用this.getter()方法，读取vm.name属性的值。 这会触发vm.name的getter，进而执行dep.depend()方法，将当前的Watcher添加到vm.name的Dep实例的subs数组中。Dep.target = null;: 最后，将Dep.target设置为null，表示当前的Watcher执行完毕。
总结：getter 的依赖收集流程
Watcher初始化时，会执行get()方法，并将自身设置为Dep.target。- 在
get()方法中，会读取响应式属性的值，触发该属性的getter。 getter中会调用dep.depend()方法，将Dep.target(即当前的Watcher) 添加到Dep的subs数组中。Watcher执行完毕后，会将Dep.target设置为null。
通过这个过程，Vue 就知道了哪些 Watcher 依赖于哪些属性。
第三幕：派发更新 – setter 的雷霆手段
当响应式属性的值发生变化时，setter 会被调用。 setter 的职责是通知所有依赖于该属性的 Watcher，让他们执行更新操作。
让我们继续分析上面的代码：
-
setter:if (newVal === val) { return; }: 首先判断新值和旧值是否相等，如果相等则直接返回，避免不必要的更新。console.log(Setting ${key} to`, newVal);`: 这是一个调试语句，方便我们观察属性被设置的时机。val = newVal;: 更新属性的值。dep.notify();: 这是派发更新的关键步骤。当属性的值发生变化时，会执行dep.notify()方法。
-
dep.notify():this.subs.forEach(watcher => watcher.update());: 遍历Dep的subs数组，依次调用每个Watcher的update()方法。
-
Watcher.update():const oldValue = this.value;: 保存旧值this.value = this.get();: 重新求值，触发新的依赖收集this.cb.call(this.vm, this.value, oldValue);: 调用Watcher的回调函数，执行更新操作。
总结：setter 的派发更新流程
- 当响应式属性的值发生变化时，会触发该属性的
setter。 setter中会调用dep.notify()方法，通知所有订阅者更新。dep.notify()方法会遍历Dep的subs数组，依次调用每个Watcher的update()方法。Watcher.update()方法会重新求值，并调用回调函数执行更新操作。
第四幕：深入剖析 – 表格对比
为了更清晰地理解 getter 和 setter 在依赖收集和派发更新中的作用，我们用表格进行对比：
| 特性 | getter |
setter |
|---|---|---|
| 触发时机 | 读取响应式属性的值时 | 设置响应式属性的值时 |
| 主要职责 | 依赖收集 | 派发更新 |
| 关键代码 | dep.depend() |
dep.notify() |
| 涉及的角色 | Dep, Watcher, target |
Dep, Watcher |
| 影响 | 建立属性与 Watcher 之间的依赖关系 |
通知所有依赖于该属性的 Watcher 执行更新操作 |
| 作用 | 确定哪些 Watcher 需要监听该属性的变化 |
响应式系统更新视图的核心机制 |
第五幕：实际应用 – 模拟 Vue 组件更新
为了更直观地理解，我们可以模拟一个简单的 Vue 组件更新过程：
// 模拟 Vue 组件
class MyComponent {
constructor(data) {
this.data = data;
Object.keys(this.data).forEach(key => {
defineReactive(this, key, this.data[key]);
});
this.render(); // 初始渲染
}
render() {
// 模拟 DOM 操作，更新视图
console.log('Rendering component with data:', this.name, this.age);
// 实际应用中，这里会操作 DOM，将数据渲染到视图上
}
}
// 创建一个组件实例
const component = new MyComponent({ name: 'Vue', age: 30 });
// 创建一个 Watcher，监听 name 属性的变化
new Watcher(component, function() { return this.name; }, function(newValue, oldValue) {
console.log('Name changed, re-rendering component');
this.render(); // 重新渲染组件
});
// 修改 name 属性，触发更新
component.name = 'Vue.js';在这个例子中，我们创建了一个 MyComponent 类，它具有 name 和 age 两个响应式属性。 我们还创建了一个 Watcher，监听 name 属性的变化。 当 name 属性的值发生变化时，Watcher 会收到通知，并重新渲染组件。
第六幕：总结与展望
今天我们深入探讨了 Vue 2 中 Object.defineProperty 的 getter 和 setter 在依赖收集和派发更新过程中的作用。 我们了解了 Dep、Watcher 和 target 等关键角色，以及它们如何协同工作，实现响应式系统的核心功能。
虽然 Vue 3 已经使用了 Proxy 替代了 Object.defineProperty，但理解 Object.defineProperty 的原理对于理解 Vue 的响应式系统仍然至关重要。 它能帮助我们更好地理解 Vue 的内部机制，从而编写更高效、更健壮的代码。
下次有机会，我们再聊聊 Vue 3 的 Proxy 响应式系统，看看它又有哪些新的“黑科技”。 感谢大家的观看，咱们下期再见！