欢迎来到今天的Vue 2源码剖析小课堂！今天我们来聊聊 Object.defineProperty 的 getter 和 setter 在 Vue 2 响应式系统中扮演的关键角色。这玩意儿，说白了，就是Vue能偷偷摸摸地监视你的数据，一旦数据发生变化，它就能像闹钟一样提醒你更新视图，背后的大功臣就是咱们今天要讲的 dep.depend() 和 dep.notify()。
先别急着打瞌睡，咱们用故事的方式来开始。想象一下，你是个农场主，辛辛苦苦种了一片玉米地。Vue 2 就像你的私人侦探，每天帮你盯着玉米地的长势。 Object.defineProperty 就是侦探的望远镜和窃听器，getter 负责用望远镜观察玉米的高度，setter 负责在有人偷偷给玉米施肥（修改数据）的时候，用窃听器捕捉到这个动作。 dep.depend() 就像侦探记录谁关心玉米的长势，而 dep.notify() 就像侦探通知所有关心玉米的人，玉米长高了！
一、Object.defineProperty：Vue 的数据监听雷达
Object.defineProperty 是 JavaScript 提供的一个强大的 API，允许我们精确地控制对象属性的行为。在 Vue 2 中，它被用来劫持数据的读取（getter）和写入（setter）操作，从而实现数据的响应式。
让我们先来回顾一下 Object.defineProperty 的基本用法：
let obj = {};
let value = 'Initial Value';
Object.defineProperty(obj, 'myProperty', {
get: function() {
console.log('Getting the value!');
return value;
},
set: function(newValue) {
console.log('Setting the value to:', newValue);
value = newValue;
},
enumerable: true, // 可枚举
configurable: true // 可配置
});
console.log(obj.myProperty); // 输出: Getting the value! Initial Value
obj.myProperty = 'New Value'; // 输出: Setting the value to: New Value
console.log(obj.myProperty); // 输出: Getting the value! New Value在这个例子中，我们定义了一个名为 myProperty 的属性，并为其设置了 getter 和 setter。当我们访问 obj.myProperty 时，getter 会被调用；当我们修改 obj.myProperty 时，setter 会被调用。
二、getter：依赖收集的秘密通道 (dep.depend())
在 Vue 2 的响应式系统中，getter 的主要任务是进行依赖收集。 简单来说，就是告诉侦探（Vue），哪些组件或者计算属性正在使用这个数据，需要被通知更新。
当一个组件或计算属性访问响应式数据的属性时，该属性的 getter 会被触发。在 getter 内部，我们会调用 dep.depend() 来建立依赖关系。
下面是 Vue 2 源码中 getter 的简化版本：
// 假设我们已经有了一个 Dep 类
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(sub => sub.update()); // 通知所有订阅者更新
}
}
Dep.target = null; // 当前正在计算的 Watcher
// 模拟 Vue 的 defineReactive 函数
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
console.log(`Getting ${key}`);
dep.depend(); // 依赖收集
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
console.log(`Setting ${key} to ${newVal}`);
val = newVal;
dep.notify(); // 派发更新
}
});
}
// 模拟 Watcher 类
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.getter = typeof expOrFn === 'function' ? expOrFn : function() {
// 简单模拟属性访问
let exp = expOrFn.split('.');
let value = vm;
for(let i = 0; i < exp.length; i++){
value = value[exp[i]];
}
return value;
};
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);
}
}
// 示例
let vm = {
name: 'Alice',
age: 30
};
defineReactive(vm, 'name', vm.name);
defineReactive(vm, 'age', vm.age);
let watcher1 = new Watcher(vm, 'name', (newValue, oldValue) => {
console.log(`name changed from ${oldValue} to ${newValue}`);
});
let watcher2 = new Watcher(vm, 'age', (newValue, oldValue) => {
console.log(`age changed from ${oldValue} to ${newValue}`);
});
vm.name = 'Bob'; // 输出: Setting name to Bob name changed from Alice to Bob
vm.age = 31; // 输出: Setting age to 31 age changed from 30 to 31代码解读：
Dep类： 每个响应式属性都有一个对应的Dep实例。Dep维护着一个订阅者列表 (subs)，存储着所有依赖于该属性的Watcher实例。Dep.target： 这是一个全局变量，用于存储当前正在计算的Watcher实例。 在Watcher的get()方法中，我们会将Dep.target设置为当前的Watcher，然后在访问响应式数据时，getter中的dep.depend()就可以将当前的Watcher添加到Dep的订阅者列表中。 访问结束后，将Dep.target设置为null，表示不再有正在计算的Watcher。defineReactive函数： 这个函数负责为对象的属性创建响应式。 它会为每个属性创建一个Dep实例，并使用Object.defineProperty来劫持属性的getter和setter。getter函数： 当访问响应式属性时，getter函数会被调用。 在getter函数中，我们会调用dep.depend()来进行依赖收集。Watcher类：Watcher是 Vue 2 中观察者模式的实现。 每个Watcher实例都关联着一个表达式或函数，当表达式或函数依赖的响应式数据发生变化时，Watcher会收到通知并执行更新。
在这个例子中，当创建 watcher1 和 watcher2 时，它们的 get() 方法会被调用，从而触发了 vm.name 和 vm.age 的 getter。 在 getter 中，dep.depend() 会将 watcher1 和 watcher2 添加到各自的 Dep 实例的订阅者列表中。 这样，当 vm.name 或 vm.age 发生变化时，setter 中的 dep.notify() 就可以通知到 watcher1 和 watcher2 进行更新。
更详细的 dep.depend() 流程：
| 步骤 | 描述 | 代码示例 |
|---|---|---|
| 1 | 组件渲染或计算属性求值时，Vue 会创建一个 Watcher 实例。 这个 Watcher 实例会保存一个回调函数，用于在数据变化时更新视图。 |
let watcher = new Watcher(vm, () => vm.message, (newValue, oldValue) => { console.log('message changed'); }); |
| 2 | 在 Watcher 实例的 get() 方法中，Dep.target 被设置为当前的 Watcher 实例。 Dep.target 是一个全局变量，用于指示当前正在进行依赖收集的 Watcher。 |
Dep.target = this; |
| 3 | Watcher 实例会执行一个表达式或函数，该表达式或函数会访问响应式数据。 当访问响应式数据的属性时，该属性的 getter 会被触发。 |
this.getter.call(this.vm, this.vm); // 触发 getter |
| 4 | 在 getter 函数中，dep.depend() 会被调用。 dep.depend() 会将当前的 Dep.target (也就是当前的 Watcher 实例) 添加到 Dep 实例的订阅者列表中。 |
dep.depend(); // 在 getter 中调用 |
| 5 | Dep.target 被设置为 null。 这意味着依赖收集过程结束。 |
Dep.target = null; |
三、setter：派发更新的号角 (dep.notify())
当响应式数据被修改时，对应的 setter 会被触发。 setter 的主要任务是通知所有依赖于该数据的 Watcher 实例进行更新。 这就像农场主给玉米施肥了，侦探需要通知所有关心玉米长势的人。
在 setter 内部，我们会调用 dep.notify() 来触发更新。
// 还是上面 defineReactive 的例子
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
console.log(`Getting ${key}`);
dep.depend(); // 依赖收集
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
console.log(`Setting ${key} to ${newVal}`);
val = newVal;
dep.notify(); // 派发更新
}
});
}代码解读：
setter函数： 当修改响应式属性时，setter函数会被调用。dep.notify()： 在setter函数中，我们会调用dep.notify()来通知所有订阅者更新。
更详细的 dep.notify() 流程：
| 步骤 | 描述 | 代码示例 |
|---|---|---|
| 1 | 当响应式数据被修改时，该数据的 setter 函数会被调用。 |
vm.message = 'Hello, Vue!'; // 触发 setter |
| 2 | 在 setter 函数中，dep.notify() 会被调用。 |
dep.notify(); // 在 setter 中调用 |
| 3 | dep.notify() 会遍历 Dep 实例的订阅者列表 (subs)，并调用每个 Watcher 实例的 update() 方法。 |
this.subs.forEach(sub => sub.update()); |
| 4 | Watcher 实例的 update() 方法会被调用。 update() 方法会将该 Watcher 实例添加到更新队列中，等待下一次 DOM 更新时进行更新。 |
queueWatcher(this); // 简化的代码，实际会涉及异步更新队列 |
四、Dep、Watcher 和 Object.defineProperty 的关系
这三个家伙是 Vue 2 响应式系统的铁三角， 缺一不可。
Dep： 是依赖关系的管理者， 负责收集依赖和派发更新。 每个响应式属性都有一个Dep实例。Watcher： 是观察者，负责监听数据的变化并执行更新。 组件和计算属性都是通过Watcher来观察数据的变化。Object.defineProperty： 是数据劫持的工具， 负责拦截数据的读取和写入操作。 通过Object.defineProperty，Vue 可以在数据被访问或修改时执行相应的操作。
它们之间的关系可以总结为：
Object.defineProperty劫持数据的getter和setter。getter中调用dep.depend()进行依赖收集，将Watcher添加到Dep的订阅者列表中。setter中调用dep.notify()派发更新，通知所有订阅者 (Watcher) 进行更新。Watcher收到通知后，执行更新操作，重新渲染视图或重新计算计算属性。
五、总结
今天我们一起深入了解了 Vue 2 中 Object.defineProperty 的 getter 和 setter 在依赖收集 (dep.depend()) 和派发更新 (dep.notify()) 过程中扮演的关键角色。 记住， getter 负责收集依赖，setter 负责派发更新。 Dep、Watcher 和 Object.defineProperty 共同构成了 Vue 2 响应式系统的核心。
理解了这些概念，你就能更好地理解 Vue 2 的响应式原理，从而更好地使用 Vue 2 进行开发。
希望今天的讲解对你有所帮助！ 下次再见！