Vue 2 数据响应式：Getter 和 Setter 的舞台剧
大家好，欢迎来到“Vue 2 数据响应式原理揭秘”讲座。今天，我们不搞虚的，直接深入 Vue 2 响应式系统的核心——Object.defineProperty 的 getter 和 setter，看看它们如何在依赖收集和派发更新的舞台上，上演一出精彩的“你侬我侬”的戏码。
先别急着打瞌睡，这玩意儿虽然听起来枯燥，但理解了它，你就掌握了 Vue 2 的“葵花宝典”，以后面试、debug 都将如鱼得水。
1. 故事的背景：Vue 2 的响应式宇宙
在 Vue 2 的世界里，数据是会“呼吸”的。 当数据发生变化时，页面上用到这些数据的组件会自动更新。 这种神奇的能力，就归功于 Vue 2 的响应式系统。 而 Object.defineProperty 就是构建这个系统的基石。
简单来说，Vue 会遍历你的 data 对象，为每个属性都使用 Object.defineProperty 定义 getter 和 setter。 这样，当你在 JavaScript 代码中读取或修改这些属性时，Vue 就能“监听到”这些操作，并做出相应的反应。
2. 主角登场：getter 和 setter
让我们先回顾一下 Object.defineProperty 的基本用法：
let obj = {};
let value = 'Hello';
Object.defineProperty(obj, 'message', {
get: function() {
console.log('Getting message:', value);
return value;
},
set: function(newValue) {
console.log('Setting message:', newValue);
value = newValue;
}
});
console.log(obj.message); // 输出: Getting message: Hello, Hello
obj.message = 'World'; // 输出: Setting message: World
console.log(obj.message); // 输出: Getting message: World, World这个例子展示了 getter 和 setter 的基本功能：
getter: 当访问obj.message时，getter函数会被调用，返回value的值。setter: 当修改obj.message的值时，setter函数会被调用，更新value的值。
在 Vue 2 中，getter 和 setter 不仅仅是简单的取值和赋值，它们还肩负着更重要的任务：依赖收集和派发更新。
3. 关键配角：Dep 类
在深入 getter 和 setter 的逻辑之前，我们需要认识一个重要的配角：Dep 类。 Dep (Dependency) 类的作用是管理依赖于某个数据的 Watcher 实例。 可以把它想象成一个“观察者列表”，当数据发生变化时，Dep 会通知列表中的所有 Watcher 实例，让它们进行更新。
Dep 类通常包含以下方法：
depend(): 用于收集依赖，将当前的 Watcher 实例添加到Dep的观察者列表中。notify(): 用于派发更新，通知Dep的观察者列表中的所有 Watcher 实例进行更新。
4. getter 的戏份：依赖收集 (dep.depend())
当组件首次渲染或者响应式数据被访问时，会触发 getter 函数。 在 getter 函数中，Vue 会调用 dep.depend() 方法来收集依赖。
代码示例（简化版）
class Dep {
constructor() {
this.subs = []; // 存储 watcher 的列表
}
depend() {
if (Dep.target && !this.subs.includes(Dep.target)) {
this.subs.push(Dep.target);
}
}
notify() {
this.subs.forEach(watcher => {
watcher.update();
});
}
}
Dep.target = null; // 静态属性，用于存储当前的 watcher 实例
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
// 依赖收集的关键步骤
if (Dep.target) { // 判断是否存在当前的 watcher
dep.depend(); // 将当前的 watcher 添加到 dep 的观察者列表中
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify(); // 触发更新
}
});
}
// 模拟一个 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 newValue = this.vm[this.expOrFn];
this.cb.call(this.vm, newValue, this.value);
this.value = newValue;
}
}
// 示例用法
const vm = {
message: 'Hello'
};
defineReactive(vm, 'message', vm.message);
const watcher = new Watcher(vm, 'message', (newValue, oldValue) => {
console.log(`message changed from ${oldValue} to ${newValue}`);
});
vm.message = 'World'; // 触发 setter，进而触发 notify代码逻辑解读
defineReactive函数: 这个函数是定义响应式属性的关键。 它接受一个对象obj，一个键key，和一个值val作为参数。它会使用Object.defineProperty为obj[key]定义getter和setter。Dep实例: 在defineReactive函数中，为每个属性创建一个Dep实例。 这个Dep实例负责管理所有依赖于该属性的 Watcher 实例。Dep.target: 这是一个静态属性，用于存储当前的 Watcher 实例。 在 Watcher 实例初始化或者更新时，会将自身赋值给Dep.target，然后在访问响应式数据时，getter就可以通过Dep.target知道是哪个 Watcher 实例正在访问该数据，从而将该 Watcher 实例添加到Dep的观察者列表中。getter函数的依赖收集: 在getter函数中，首先判断Dep.target是否存在。 如果存在，说明当前有 Watcher 实例正在访问该属性，那么就调用dep.depend()方法，将当前的 Watcher 实例添加到Dep的观察者列表中。Watcher类: Watcher 类的作用是监听数据的变化，并在数据变化时执行回调函数。 在 Watcher 类的构造函数中，会立即执行this.get()方法，这个方法会访问响应式数据，触发getter函数，从而触发依赖收集。
更直观的解释
你可以把 Dep 类想象成一个粉丝群，每个响应式属性都有一个自己的粉丝群。 当有人（Watcher）在组件中使用了这个属性，他就成为了这个属性的粉丝，会被添加到这个粉丝群里。 getter 的作用就像是粉丝群的管理员，当有人访问这个属性时，管理员会检查这个人是不是已经加入粉丝群了，如果还没有，就把他拉进来。
表格总结 getter 的作用
| 步骤 | 代码 | 说明 |
|---|---|---|
| 1 | if (Dep.target) |
检查是否存在当前的 Watcher 实例。 Dep.target 相当于一个全局变量，指向当前正在计算的 Watcher 实例。 |
| 2 | dep.depend() |
如果存在 Watcher 实例，调用 dep.depend() 方法，将该 Watcher 实例添加到 Dep 的观察者列表中。 dep.depend() 内部会将 Dep.target (即当前的 Watcher 实例) 添加到 dep.subs 数组中。 |
| 3 | return val |
返回属性的值。 |
5. setter 的戏份：派发更新 (dep.notify())
当修改响应式属性的值时，会触发 setter 函数。 在 setter 函数中，Vue 会调用 dep.notify() 方法来派发更新。
代码示例（继续沿用上面的代码）
function defineReactive(obj, key, val) {
const dep = new Dep(); // 为每个属性创建一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
// ... (getter 代码，同上)
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify(); // 触发更新
}
});
}代码逻辑解读
setter函数的更新触发: 在setter函数中，首先判断新值和旧值是否相等。 如果相等，说明数据没有发生变化，不需要进行更新。 如果不相等，则更新属性的值，并调用dep.notify()方法，通知所有依赖于该属性的 Watcher 实例进行更新。dep.notify()方法:dep.notify()方法会遍历Dep的观察者列表 (dep.subs)，并依次调用每个 Watcher 实例的update()方法。Watcher.update()方法:Watcher.update()方法会重新计算表达式的值，并将新值和旧值进行比较。 如果新值和旧值不相等，则调用 Watcher 实例的回调函数，触发组件的更新。
更直观的解释
setter 的作用就像是粉丝群的群主，当属性的值发生变化时，群主会发出一条通知，告诉所有粉丝：“喂！数据更新啦，快来看啊！” 收到通知的粉丝（Watcher）会立即行动，更新自己负责显示的内容。
表格总结 setter 的作用
| 步骤 | 代码 | 说明 |
|---|---|---|
| 1 | if (newVal === val) |
检查新值和旧值是否相等。 如果相等，则表示数据没有发生变化，不需要进行更新，直接返回。 |
| 2 | val = newVal |
更新属性的值。 |
| 3 | dep.notify() |
调用 dep.notify() 方法，通知所有依赖于该属性的 Watcher 实例进行更新。 dep.notify() 内部会遍历 dep.subs 数组，并依次调用每个 Watcher 实例的 update() 方法。 Watcher.update() 方法会重新计算表达式的值，并将新值和旧值进行比较。 如果新值和旧值不相等，则调用 Watcher 实例的回调函数，触发组件的更新。 |
6. 依赖收集和派发更新的完整流程
现在，让我们把 getter 和 setter 的戏份串联起来，看看依赖收集和派发更新的完整流程：
- 组件首次渲染或访问响应式数据: 当组件首次渲染或者响应式数据被访问时，会触发
getter函数。 getter函数进行依赖收集: 在getter函数中，Vue 会调用dep.depend()方法，将当前的 Watcher 实例添加到Dep的观察者列表中。- 修改响应式属性的值: 当修改响应式属性的值时，会触发
setter函数。 setter函数派发更新: 在setter函数中，Vue 会调用dep.notify()方法，通知所有依赖于该属性的 Watcher 实例进行更新。- Watcher 实例收到更新通知:
dep.notify()方法会遍历Dep的观察者列表，并依次调用每个 Watcher 实例的update()方法。 - Watcher 实例更新组件:
Watcher.update()方法会重新计算表达式的值，并将新值和旧值进行比较。 如果新值和旧值不相等，则调用 Watcher 实例的回调函数，触发组件的更新。
7. 总结：getter 和 setter 的价值
Object.defineProperty 的 getter 和 setter 是 Vue 2 响应式系统的核心。 它们通过依赖收集和派发更新，实现了数据驱动视图的效果，让开发者可以更加专注于业务逻辑的编写，而无需手动操作 DOM。
getter: 负责收集依赖，将 Watcher 实例添加到Dep的观察者列表中。setter: 负责派发更新，通知Dep的观察者列表中的所有 Watcher 实例进行更新。
理解了 getter 和 setter 的工作原理，你就掌握了 Vue 2 响应式系统的“命脉”，可以更好地理解 Vue 2 的源码，解决实际开发中遇到的问题，并为学习 Vue 3 的响应式系统打下坚实的基础。
8. Vue 3 的响应式系统：Proxy 的崛起
虽然今天我们重点讲解了 Vue 2 中 Object.defineProperty 的应用，但是也必须提一下，Vue 3 已经拥抱了 Proxy。 Proxy 提供了更强大的拦截能力，可以监听更多类型的操作，例如属性的添加和删除。 相比于 Object.defineProperty，Proxy 具有以下优势：
- 监听更多操作:
Proxy可以监听属性的添加和删除，而Object.defineProperty只能监听属性的读取和修改。 - 无需遍历对象:
Proxy可以直接代理整个对象，而Object.defineProperty需要遍历对象的每个属性才能进行代理。 - 性能更好: 在某些情况下，
Proxy的性能比Object.defineProperty更好。
简单 Proxy 示例
const obj = { name: 'Alice', age: 30 };
const proxy = new Proxy(obj, {
get(target, prop) {
console.log(`Getting ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`Setting ${prop} to ${value}`);
target[prop] = value;
return true; // 表示设置成功
}
});
console.log(proxy.name); // 输出: Getting name, Alice
proxy.age = 31; // 输出: Setting age to 31Vue 3 使用 Proxy 构建了更加灵活和高效的响应式系统。 但是，Object.defineProperty 在 Vue 2 中仍然发挥着重要作用，理解它的工作原理对于学习 Vue 2 和理解 Vue 3 的响应式系统都有很大的帮助。
好了，今天的讲座就到这里。希望大家通过今天的学习，对 Vue 2 的响应式系统有了更深入的理解。 记住，理解原理才能更好地应用框架，才能在遇到问题时迎刃而解。 下次再见!