同学们，掌声在哪里！欢迎来到今天的“Vue 2 遗老遗少自救指南”讲座！
今天咱们不搞花里胡哨的，直奔主题：在 Vue 2 那会儿，用 Object.defineProperty 实现响应式，遇到深层嵌套对象，那叫一个头疼！稍微不注意，数据更新了，视图却纹丝不动，简直让人怀疑人生。
Vue 3 出了之后，用 Proxy 解决了这个问题，香是真香，但咱们现在还在 Vue 2 的坑里挣扎，怎么办？别慌，今天就教大家用自定义 Watcher 解决这个难题。
先聊聊 Vue 2 的痛点
Vue 2 的响应式核心是 Object.defineProperty。简单来说，就是拦截对象的 get 和 set 操作，当读取属性时，收集依赖（Watcher），当设置属性时，通知依赖更新。
function defineReactive(obj, key, val) {
// 如果 val 还是一个对象，递归处理，实现嵌套对象的响应式
if (typeof val === 'object' && val !== null) {
observe(val); // 递归调用 observe，让 val 也变成响应式对象
}
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log(`Getting key: ${key}`); // 调试信息
// 收集依赖
if (Dep.target) { // Dep.target 就是当前的 Watcher 实例
dep.depend(); // 让 dep 收集当前的 Watcher
}
return val;
},
set: function reactiveSetter(newVal) {
console.log(`Setting key: ${key} to ${newVal}`); // 调试信息
if (newVal === val) {
return;
}
val = newVal;
dep.notify(); // 通知所有 Watcher 更新
}
});
}
function observe(obj) {
if (typeof obj !== 'object' || obj === null) {
return; // 只处理对象
}
return new Observer(obj);
}
class Observer {
constructor(value) {
this.value = value;
this.walk(value);
}
walk(obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]]);
}
}
}
class Dep {
constructor() {
this.subs = []; // 存放 Watcher 实例
}
depend() {
if (Dep.target) {
this.addSub(Dep.target);
}
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => {
sub.update();
});
}
}
// 全局的 Watcher 目标
Dep.target = null;
function pushTarget(watcher) {
Dep.target = watcher;
}
function popTarget() {
Dep.target = null;
}
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.value = this.get();
}
get() {
pushTarget(this); // 将当前 Watcher 设置为 Dep.target
const value = this.vm[this.expOrFn]; // 触发 getter，收集依赖
popTarget(); // 清空 Dep.target
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue);
}
}这段代码看着挺唬人，其实就是做了以下几件事：
defineReactive: 把对象的属性变成响应式的。observe: 遍历对象的所有属性，递归调用defineReactive。Dep: 依赖管理器，负责收集和通知Watcher。Watcher: 观察者，当依赖发生变化时，执行回调函数。
问题来了：深层嵌套对象怎么搞？
假设我们有这样一个数据结构：
let data = {
a: {
b: {
c: 1
}
}
};我们想监听 data.a.b.c 的变化，但是直接用上面的代码，只会对 data.a 和 data.a.b 进行响应式处理，data.a.b.c 并不会。
这时候，如果我们直接修改 data.a.b.c 的值，视图是不会更新的！这就是 Vue 2 的痛点之一：无法直接监听深层嵌套对象的属性变化。
自定义 Watcher，迎难而上
解决这个问题，核心思路是：手动触发深层嵌套属性的依赖收集。
我们可以修改 Watcher 的 get 方法，让它在读取属性时，递归访问到最深层的属性，从而触发所有涉及到的 getter，完成依赖收集。
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.value = this.get();
}
get() {
pushTarget(this); // 将当前 Watcher 设置为 Dep.target
let value;
try {
// 关键：使用 parsePath 函数递归访问属性
value = this.parsePath(this.vm, this.expOrFn);
} catch (e) {
console.error(e);
value = undefined;
}
popTarget(); // 清空 Dep.target
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue);
}
parsePath(obj, path) {
const segments = path.split('.');
for (let i = 0; i < segments.length; i++) {
if (!obj) return; // 防止访问 undefined 的属性
obj = obj[segments[i]];
}
return obj;
}
}在这个修改后的 Watcher 中，我们添加了一个 parsePath 函数，它接收一个对象和一个路径字符串（比如 'a.b.c'），然后递归访问对象的属性，直到到达最深层的属性。
这样，当我们创建一个 Watcher 监听 data.a.b.c 时，parsePath 函数会依次访问 data.a、data.a.b 和 data.a.b.c，从而触发它们的 getter，完成依赖收集。
完整示例
// 上面的 defineReactive, observe, Dep, pushTarget, popTarget 定义不变
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.value = this.get();
}
get() {
pushTarget(this); // 将当前 Watcher 设置为 Dep.target
let value;
try {
// 关键：使用 parsePath 函数递归访问属性
value = this.parsePath(this.vm, this.expOrFn);
} catch (e) {
console.error(e);
value = undefined;
}
popTarget(); // 清空 Dep.target
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue);
}
parsePath(obj, path) {
const segments = path.split('.');
for (let i = 0; i < segments.length; i++) {
if (!obj) return; // 防止访问 undefined 的属性
obj = obj[segments[i]];
}
return obj;
}
}
// 初始化数据
let data = {
a: {
b: {
c: 1
}
}
};
// 将数据变成响应式
observe(data);
// 创建 Watcher 监听 data.a.b.c
new Watcher(data, 'a.b.c', (newValue, oldValue) => {
console.log(`data.a.b.c changed from ${oldValue} to ${newValue}`);
});
// 修改 data.a.b.c 的值
data.a.b.c = 2; // 控制台输出: data.a.b.c changed from 1 to 2原理分析
observe(data)将data对象变成响应式对象，包括data.a和data.a.b。new Watcher(data, 'a.b.c', ...)创建一个Watcher监听data.a.b.c。Watcher的get方法调用parsePath(data, 'a.b.c')，依次访问data.a、data.a.b和data.a.b.c。- 访问
data.a时，触发data.a的getter，Dep.target(当前的Watcher) 被添加到data.a的Dep中。 - 访问
data.a.b时，触发data.a.b的getter，Dep.target(当前的Watcher) 被添加到data.a.b的Dep中。 - 访问
data.a.b.c时，触发data.a.b.c的getter，Dep.target(当前的Watcher) 被添加到data.a.b.c的Dep中。 - 当
data.a.b.c的值被修改时，data.a.b.c的setter被触发，通知它的Dep中的所有Watcher更新。 Watcher的update方法被调用，执行回调函数，输出data.a.b.c的新值和旧值。
对比 Vue 3 的解决方案
Vue 3 使用 Proxy 替代了 Object.defineProperty 来实现响应式。Proxy 的优点在于：
- 更强大的拦截能力:
Proxy可以拦截更多的操作，比如delete、has、ownKeys等。 - 不需要递归遍历:
Proxy只需要代理对象本身，不需要递归遍历对象的属性，就能监听所有属性的变化，包括深层嵌套的属性。 - 性能更好:
Proxy的性能通常比Object.defineProperty更好，尤其是在处理大型对象时。
用表格对比一下：
| 特性 | Vue 2 (Object.defineProperty) | Vue 3 (Proxy) |
|---|---|---|
| 拦截能力 | 只能拦截 get 和 set |
可以拦截更多操作 |
| 嵌套对象响应式 | 需要手动递归遍历 | 自动监听，无需递归 |
| 性能 | 相对较差 | 更好 |
| 代码复杂度 | 较高 | 较低 |
总结
虽然 Vue 3 的 Proxy 解决了深层嵌套对象的响应式问题，但我们仍然可以在 Vue 2 中使用自定义 Watcher 来实现类似的功能。这种方法虽然稍微麻烦一些，但可以帮助我们更好地理解 Vue 2 的响应式原理。
注意事项
- 这种方法只适用于监听已存在的属性。如果对象新增了属性，需要手动调用
observe来将其变成响应式。 parsePath函数需要小心处理 undefined 的情况，防止访问 undefined 的属性导致错误。
结语
好了，今天的“Vue 2 遗老遗少自救指南”讲座就到这里。希望大家能够掌握这种自定义 Watcher 的方法，在 Vue 2 的世界里也能活得滋润！下课！
对了，偷偷告诉你们，其实还有一些其他的方案，比如使用 Vue.set 和 Vue.delete 来添加和删除属性，也能触发视图更新。但是，使用自定义 Watcher 更加灵活，可以应对更复杂的场景。