Vue 2 响应式系统：Object.defineProperty 历险记
大家好，我是你们今天的导游，将带大家一起深入 Vue 2 的响应式核心，探索 Object.defineProperty 这位幕后英雄的秘密。准备好了吗？Let’s go！
在 Vue 2 的世界里，数据就像被施了魔法一样，当你修改它们时，页面会自动更新。这背后的魔力，很大一部分要归功于 Object.defineProperty。它就像一位精明的侦探，时刻监视着数据的变化，并及时通知相关人员。
一、Object.defineProperty：数据世界的“侦察兵”
Object.defineProperty 是 JavaScript 提供的一个方法，允许我们精确地定义对象属性的行为。我们可以控制属性是否可枚举、是否可配置、是否可写，最重要的是，我们可以定义属性的 getter 和 setter。
简单来说，我们可以用它给对象的属性装上“窃听器”（getter）和“警报器”（setter）。
基本语法：
Object.defineProperty(obj, prop, descriptor)obj: 要定义属性的对象。prop: 要定义或修改的属性的名称或 Symbol。descriptor: 属性描述符，包含configurable,enumerable,value,writable,get,set等选项。
一个简单的例子：
const person = {};
let _name = '默认名字'; // 用下划线开头，表示这是一个“私有”变量，虽然JS没有真正的私有性
Object.defineProperty(person, 'name', {
get: function() {
console.log('有人想知道我的名字了！');
return _name;
},
set: function(newName) {
console.log('有人想改我的名字！');
_name = newName;
},
enumerable: true, // 可枚举，可以被 for...in 循环访问
configurable: true // 可配置，可以被 delete 删除，也可以重新定义
});
console.log(person.name); // 输出：有人想知道我的名字了！ 默认名字
person.name = '李四'; // 输出：有人想改我的名字！
console.log(person.name); // 输出：有人想知道我的名字了！ 李四在这个例子中，我们给 person 对象添加了一个 name 属性，并定义了它的 getter 和 setter。每次访问或修改 person.name，都会触发相应的函数。
二、响应式化的核心：getter 和 setter 的妙用
Vue 2 利用 Object.defineProperty 的 getter 和 setter 来实现数据的响应式。当组件中使用到某个响应式数据时，Vue 会在 getter 中收集依赖 (Dependency Collection)，也就是记录下哪些组件需要依赖这个数据。当数据发生变化时，Vue 会在 setter 中通知这些依赖 (Dependency Notification)，让它们更新视图。
1. getter：依赖收集 (Dependency Collection)
当组件渲染时，会访问响应式数据的属性。这时，getter 会被触发，它会做以下几件事：
- 找到当前正在运行的
Watcher。Watcher可以理解为一个观察者，它负责监听数据的变化，并在变化时更新视图。每个组件都有一个对应的Watcher实例。简单来说，就是谁需要我的数据 - 将
Watcher添加到当前属性的依赖列表中。 每个响应式属性都有一个Dep对象 (Dependency)，用于存储依赖于该属性的Watcher。getter会将当前的Watcher添加到Dep中。 我需要记录一下，谁需要我的数据 - 反向收集：让
Watcher也记住这个Dep。 这主要是为了在组件销毁时，可以清理掉不必要的依赖关系。 我也需要记录一下，我被谁依赖了。
代码示例 (简化版):
class Dep {
constructor() {
this.subs = []; // 存储依赖于当前属性的 Watcher
}
depend() {
if (Dep.target) { // Dep.target 是一个全局变量，指向当前正在运行的 Watcher
if (!this.subs.includes(Dep.target)) {
this.subs.push(Dep.target);
Dep.target.addDep(this); // 让 Watcher 也记住这个 Dep
}
}
}
notify() {
this.subs.forEach(watcher => {
watcher.update(); // 通知所有 Watcher 更新
});
}
}
Dep.target = null; // 全局变量，指向当前正在运行的 Watcher
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.deps = []; // 存储当前 Watcher 依赖的 Dep
this.value = this.get(); // 初始化时，获取一次值，触发 getter，进行依赖收集
}
get() {
Dep.target = this; // 将当前 Watcher 设置为全局的 Dep.target
const value = this.vm[this.expOrFn]; // 访问属性，触发 getter
Dep.target = null; // 清空 Dep.target
return value;
}
addDep(dep) {
this.deps.push(dep);
}
update() {
const newValue = this.get();
this.cb.call(this.vm, newValue, this.value); // 执行回调函数，更新视图
this.value = newValue;
}
}
function defineReactive(obj, key, val) {
const dep = new Dep(); // 每个响应式属性都有一个 Dep 实例
Object.defineProperty(obj, key, {
get: function() {
console.log(`访问了属性 ${key}`);
dep.depend(); // 依赖收集
return val;
},
set: function(newVal) {
if (newVal !== val) {
console.log(`修改了属性 ${key}，新值为 ${newVal}`);
val = newVal;
dep.notify(); // 派发更新
}
}
});
}
// 使用示例
const vm = {
name: '张三'
};
defineReactive(vm, 'name', vm.name);
const watcher = new Watcher(vm, 'name', (newValue, oldValue) => {
console.log(`name 属性更新了，新值为 ${newValue}，旧值为 ${oldValue}`);
});
vm.name = '王五'; // 输出：修改了属性 name，新值为 王五 name 属性更新了，新值为 王五，旧值为 张三表格总结：getter 流程
| 步骤 | 描述 | 代码体现 |
|---|---|---|
| 1 | 检查是否存在正在运行的 Watcher (Dep.target)。 |
if (Dep.target) |
| 2 | 将 Watcher 添加到当前属性的 Dep 的 subs 数组中。 |
this.subs.push(Dep.target) |
| 3 | 让 Watcher 也记住这个 Dep。 |
Dep.target.addDep(this) |
2. setter：派发更新 (Dependency Notification)
当响应式数据的属性被修改时，setter 会被触发，它会做以下几件事：
- 检查新值和旧值是否相同。 如果相同，则不需要更新。
- 更新属性的值。
- 通知
Dep对象，让它通知所有依赖于该属性的Watcher更新。Dep会遍历自己的subs数组，依次调用每个Watcher的update方法。
代码示例 (继续上面的例子):
// 在上面的 defineReactive 函数中，setter 的实现
set: function(newVal) {
if (newVal !== val) {
console.log(`修改了属性 ${key}，新值为 ${newVal}`);
val = newVal;
dep.notify(); // 派发更新
}
}
//在上面的 dep 的代码中
notify() {
this.subs.forEach(watcher => {
watcher.update(); // 通知所有 Watcher 更新
});
}表格总结：setter 流程
| 步骤 | 描述 | 代码体现 |
|---|---|---|
| 1 | 检查新值和旧值是否相同。 | if (newVal !== val) |
| 2 | 更新属性的值。 | val = newVal |
| 3 | 通知 Dep 对象，让它通知所有依赖于该属性的 Watcher 更新。 |
dep.notify() |
三、深度监听：递归 defineReactive
Vue 2 能够监听对象内部的属性变化，这要归功于递归地调用 defineReactive。当一个对象被响应式化时，Vue 会遍历该对象的所有属性，并对每个属性调用 defineReactive。如果属性的值仍然是一个对象，则递归地对该对象进行响应式化。
代码示例 (简化版):
function observe(value) {
if (typeof value !== 'object' || value === null) {
return; // 只处理对象
}
if (Array.isArray(value)) {
//处理数组（这里简化，不考虑数组的响应式）
return
}
Object.keys(value).forEach(key => {
defineReactive(value, key, value[key]); // 递归调用 defineReactive
});
}
function defineReactive(obj, key, val) {
observe(val); // 递归调用 observe，深度监听
const dep = new Dep();
Object.defineProperty(obj, key, {
get: function() {
console.log(`访问了属性 ${key}`);
dep.depend();
return val;
},
set: function(newVal) {
if (newVal !== val) {
console.log(`修改了属性 ${key}，新值为 ${newVal}`);
observe(newVal); // 对新值进行响应式化
val = newVal;
dep.notify();
}
}
});
}
// 使用示例
const vm = {
user: {
name: '张三',
age: 20
}
};
observe(vm); // 对 vm 进行响应式化
const watcher = new Watcher(vm.user, 'name', (newValue, oldValue) => {
console.log(`name 属性更新了，新值为 ${newValue}，旧值为 ${oldValue}`);
});
vm.user.name = '王五'; // 输出：修改了属性 name，新值为 王五 name 属性更新了，新值为 王五，旧值为 张三在这个例子中，我们首先调用 observe 函数对 vm 对象进行响应式化。observe 函数会遍历 vm 对象的所有属性，并对每个属性调用 defineReactive。由于 vm.user 也是一个对象，因此 defineReactive 会递归地调用 observe，对 vm.user 对象进行响应式化。这样，当修改 vm.user.name 时，也会触发 Watcher 的更新。
四、Object.defineProperty 的局限性
虽然 Object.defineProperty 在 Vue 2 的响应式系统中扮演了关键角色，但它也有一些局限性：
- 无法监听数组的变化。
Object.defineProperty只能监听对象属性的访问和修改，无法监听数组的push,pop,shift,unshift,splice,sort,reverse等方法。 Vue 2 通过重写这些方法来解决这个问题，但仍然存在一些限制。 - 必须提前知道所有属性。
Object.defineProperty只能在对象创建时定义属性的getter和setter。如果对象在创建后添加了新的属性，则无法直接监听这些属性的变化。 Vue 2 提供了Vue.set和this.$set方法来解决这个问题，但使用起来相对麻烦。 - 性能问题。 当对象属性很多时，使用
Object.defineProperty会导致性能下降。因为每个属性都需要定义getter和setter，这会增加内存占用和计算量。
表格总结：Object.defineProperty 的优缺点
| 特性 | 优点 | 缺点 |
|---|---|---|
| 监听对象属性 | 精确控制属性的行为 | 无法监听数组的变化 |
| 依赖收集和派发更新 | 实现响应式更新 | 必须提前知道所有属性 |
| 兼容性 | 兼容性好 (IE8+，需要模拟) | 性能问题：属性过多时性能下降 |
五、Proxy：未来的希望
Vue 3 使用 Proxy 来替代 Object.defineProperty，解决了 Object.defineProperty 的一些局限性。
- 可以监听数组的变化。
Proxy可以拦截数组的push,pop,shift,unshift,splice,sort,reverse等方法。 - 不需要提前知道所有属性。
Proxy可以拦截对不存在属性的访问和修改。 - 性能更好。
Proxy的性能通常比Object.defineProperty更好。
简单对比：
| 特性 | Object.defineProperty |
Proxy |
|---|---|---|
| 监听对象属性 | 只能监听已存在的属性 | 可以监听任何属性（包括不存在的属性） |
| 监听数组 | 无法直接监听 | 可以直接监听 |
| 性能 | 属性多时性能下降 | 性能更好 |
| 兼容性 | 兼容性好 (IE8+，需要模拟) | 兼容性较差 (IE 不支持) |
六、总结
Object.defineProperty 是 Vue 2 响应式系统的核心，它通过 getter 和 setter 实现了依赖收集和派发更新。虽然 Object.defineProperty 存在一些局限性，但它仍然是一个非常强大的工具。Vue 3 使用 Proxy 替代 Object.defineProperty，解决了 Object.defineProperty 的一些局限性，并带来了更好的性能。
希望今天的讲解能帮助大家更好地理解 Vue 2 的响应式系统。记住，理解原理才能更好地使用框架，甚至创造自己的框架！下次再见！