Vue 2 的数据响应式：getter 和 setter 的二人转，以及 dep.depend() 和 dep.notify() 的幕后推手
各位观众，晚上好！欢迎来到“Vue 2 的数据响应式原理”讲座。今晚，我们将深入探讨 Vue 2 中 Object.defineProperty 的 getter 和 setter，以及它们如何与 dep.depend() 和 dep.notify() 协同工作，共同构建 Vue 2 的数据响应式系统。
准备好了吗？让我们开始这场关于数据“监听”和“通知”的奇妙旅程！
开场白：Vue 2 的数据响应式，一场精妙的魔术表演
在 Vue 2 中，数据响应式就像一场魔术表演。你修改了数据，视图就自动更新了。这背后，隐藏着一套精心设计的机制。而 Object.defineProperty 就是这场魔术的关键道具。
Vue 2 使用 Object.defineProperty 来拦截数据的读取（通过 getter）和修改（通过 setter）。当数据被读取时，getter 会悄悄地收集依赖；当数据被修改时，setter 会触发更新。而 dep.depend() 和 dep.notify() 就像是导演和演员，控制着依赖收集和派发更新的节奏。
第一幕：Object.defineProperty 的粉墨登场
Object.defineProperty 是 JavaScript 提供的一个强大的 API，它允许我们精确地定义对象属性的特性，包括是否可枚举、是否可配置、是否可写，以及最重要的——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;
}
});
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 的主要任务是收集依赖。所谓“依赖”，就是指那些依赖于该数据的“观察者”（Watcher）。观察者通常是组件的渲染函数，或者计算属性。
当组件渲染时，它会读取组件所依赖的数据。这时，getter 就会被调用，并将当前正在渲染的组件（或者计算属性）添加到该数据的依赖列表中。这个过程就是依赖收集。
我们来模拟一下 Vue 2 中 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(sub => {
sub.update(); // 通知所有依赖更新
});
}
}
Dep.target = null; // 静态属性，用于存储当前正在计算的 Watcher
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个响应式属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
console.log(`Getting ${key}!`);
dep.depend(); // 在 getter 中收集依赖
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
console.log(`Setting ${key} to: ${newVal}`);
val = newVal;
dep.notify(); // 在 setter 中触发更新
}
});
}
// 模拟 Watcher
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.value = this.get(); // 初始化时获取一次值，触发依赖收集
}
get() {
Dep.target = this; // 将当前 Watcher 设置为 Dep.target
const value = this.vm[this.expOrFn]; // 读取属性，触发 getter
Dep.target = null; // 清空 Dep.target
return value;
}
update() {
const oldValue = this.value;
this.value = this.vm[this.expOrFn];
this.cb.call(this.vm, this.value, oldValue);
console.log(`Watcher updated! ${this.expOrFn}: ${oldValue} -> ${this.value}`);
}
}
// 模拟 Vue 实例
class Vue {
constructor(options) {
this._data = options.data;
for (let key in this._data) {
defineReactive(this, key, this._data[key]); // 将 data 中的属性转换为响应式属性
}
}
}
// 使用示例
const vm = new Vue({
data: {
message: 'Hello Vue!'
}
});
// 创建一个 Watcher
new Watcher(vm, 'message', function(newValue, oldValue) {
console.log(`Message changed from ${oldValue} to ${newValue}`);
});
// 修改数据，触发更新
vm.message = 'Hello World!';在这个例子中，defineReactive 函数将对象的属性转换为响应式属性。Dep 类用于管理依赖列表。Watcher 类用于观察数据的变化。
当我们创建一个 Watcher 实例时，它会立即调用 this.get() 方法。get() 方法会将 Dep.target 设置为当前 Watcher，然后读取 vm.message 属性，这会触发 message 属性的 getter。getter 会调用 dep.depend() 方法，将当前 Watcher 添加到 dep.subs 数组中。
重点：
Dep.target是一个全局变量，用于存储当前正在计算的Watcher。dep.depend()方法会将Dep.target添加到dep.subs数组中。- 只有在
Dep.target存在时，dep.depend()才会添加依赖。
第三幕：setter 的使命：派发更新 (dep.notify())
当数据被修改时，setter 会被调用。setter 的主要任务是通知所有依赖于该数据的 Watcher 进行更新。这个过程就是派发更新。
在上面的例子中，当我们修改 vm.message 的值时，message 属性的 setter 会被调用。setter 会调用 dep.notify() 方法，遍历 dep.subs 数组，并调用每个 Watcher 的 update() 方法。
Watcher 的 update() 方法会重新计算表达式的值，并与旧值进行比较。如果值发生了变化，Watcher 就会调用回调函数，并将新值和旧值作为参数传递给回调函数。
重点：
dep.notify()方法会遍历dep.subs数组，并调用每个Watcher的update()方法。Watcher的update()方法会重新计算表达式的值，并与旧值进行比较。- 只有当值发生变化时，
Watcher才会调用回调函数。
幕间休息：Dep 类，连接 getter 和 setter 的桥梁
Dep 类在 Vue 2 的数据响应式系统中扮演着至关重要的角色。它就像一座桥梁，连接了 getter 和 setter。
Dep 类的主要职责是：
- 维护一个依赖列表 (
subs数组)，用于存储所有依赖于该数据的Watcher。 - 提供
depend()方法，用于在getter中收集依赖。 - 提供
notify()方法，用于在setter中派发更新。
Dep 类的结构可以简化为下表：
| 方法 | 作用 | 调用时机 |
|---|---|---|
depend() |
将当前 Watcher 添加到 subs 数组中 |
在 getter 中，当数据被读取时 |
notify() |
遍历 subs 数组，并调用每个 Watcher 的 update() 方法 |
在 setter 中，当数据被修改时 |
addSub(sub) |
添加一个 Watcher 对象到 subs 数组 (虽然上面的例子没用，但实际Vue源码有) |
通常在组件初始化或计算属性初始化时，手动添加 |
removeSub(sub) |
从 subs 数组中移除一个 Watcher 对象 (虽然上面的例子没用，但实际Vue源码有) |
通常在组件卸载或计算属性销毁时，手动移除 |
第四幕：深入 Watcher：数据的观察者和更新者
Watcher 类是 Vue 2 数据响应式系统中的另一个重要组成部分。它就像一个观察者，时刻关注着数据的变化。
Watcher 类的主要职责是：
- 接收一个表达式或函数，用于计算需要观察的值。
- 在初始化时，计算一次表达式的值，并触发依赖收集。
- 当数据发生变化时，重新计算表达式的值，并与旧值进行比较。
- 如果值发生了变化，调用回调函数，并将新值和旧值作为参数传递给回调函数。
Watcher 类的结构可以简化为下表：
| 属性或方法 | 作用 |
|---|---|
vm |
Vue 实例 |
expOrFn |
表达式或函数，用于计算需要观察的值 |
cb |
回调函数，当值发生变化时被调用 |
value |
当前的值 |
get() |
计算表达式的值，并触发依赖收集 |
update() |
重新计算表达式的值，并与旧值进行比较。如果值发生了变化，调用回调函数。如果使用了vm.$nextTick，这里会把更新推到下一个tick进行异步更新。 |
evaluate() |
实际执行表达式或者函数，获取最新的值。(虽然上面的例子没用，但实际Vue源码有) |
depend() |
手动收集依赖，用于computed属性等场景。(虽然上面的例子没用，但实际Vue源码有) |
teardown() |
清理Watcher，移除所有依赖关系，用于组件卸载等场景。(虽然上面的例子没用，但实际Vue源码有) |
第五幕：vm.$set 和 vm.$delete：处理对象和数组的特殊情况
Vue 2 使用 Object.defineProperty 来拦截数据的读取和修改。但是，Object.defineProperty 只能拦截已存在的属性。如果我们向对象添加新的属性，或者删除对象的属性，Vue 2 就无法自动检测到这些变化。
为了解决这个问题，Vue 2 提供了 vm.$set 和 vm.$delete 方法。
vm.$set(object, key, value)：向响应式对象中添加一个属性，并确保这个新属性也是响应式的。vm.$delete(object, key)：从响应式对象中删除一个属性，并确保这个删除操作也会触发视图更新。
这两个方法本质上也是利用了响应式原理，对底层进行了增强处理。例如vm.$set实际上会判断要设置的属性是否存在，存在则直接赋值，如果不存在，则会调用defineReactive方法，将新属性设置为响应式属性，然后手动触发dep.notify()，通知所有依赖更新。
案例分析：Computed 属性的响应式原理
Computed 属性是 Vue 2 中一种特殊的属性。它的值是根据其他响应式属性计算出来的。当依赖的响应式属性发生变化时，Computed 属性的值会自动更新。
Computed 属性的响应式原理与普通属性略有不同。当 Computed 属性被访问时，它会执行计算函数，并将计算结果缓存起来。同时，它会收集计算函数中所依赖的响应式属性的依赖。当依赖的响应式属性发生变化时，Computed 属性会重新执行计算函数，更新缓存的值，并通知所有依赖于 Computed 属性的 Watcher 进行更新。
总结：getter 和 setter 的完美配合
Vue 2 的数据响应式系统是一个精妙的设计。Object.defineProperty 的 getter 和 setter 就像一对完美的搭档，getter 负责收集依赖，setter 负责派发更新。dep.depend() 和 dep.notify() 就像是幕后推手，控制着依赖收集和派发更新的节奏。
通过这个机制，Vue 2 实现了数据的自动更新，极大地简化了开发者的工作。
最后的彩蛋：Vue 3 的 Proxy
在 Vue 3 中，放弃了 Object.defineProperty，转而使用 Proxy 来实现数据响应式。Proxy 提供了更强大的拦截能力，可以拦截更多的操作，例如 delete、has、ownKeys 等。而且，Proxy 可以直接监听整个对象，而不需要遍历对象的每个属性。这使得 Vue 3 的数据响应式系统更加高效和灵活。
今天的讲座就到这里，希望大家对 Vue 2 的数据响应式原理有了更深入的了解。 感谢各位的观看！ 下次再见！