依赖收集器（Dependency Collector）在Vue.js（特别是Vue 2）的响应式系统中起着至关重要的作用。它的核心功能是跟踪和管理哪些“观察者”（watchers）依赖于特定的响应式属性。当这些依赖的属性发生变化时，依赖收集器能够通知所有相关的观察者进行更新。下面，我将通过一段简化的代码来演示依赖收集器的作用。
首先，我们需要定义Dep类，它代表了一个依赖收集器，能够存储并通知依赖于此属性的观察者。
class Dep {
constructor() {
this.subscribers = new Set(); // 使用Set来存储订阅者（观察者）
}
// 依赖收集：将观察者添加到订阅者集合中
depend() {
if (Dep.target) {
this.subscribers.add(Dep.target);
}
}
// 派发更新：通知所有订阅者（观察者）进行更新
notify() {
this.subscribers.forEach(subscriber => {
subscriber.update();
});
}
}
// 全局属性，用于临时存储当前正在计算的watcher
Dep.target = null;
// 模拟一个watcher类
class Watcher {
constructor(vm, expr, cb) {
this.vm = vm;
this.cb = cb;
this.value = this.get(expr); // 触发getter，进行依赖收集
Dep.target = null; // 清理Dep.target
}
// 触发getter，进行依赖收集
get(expr) {
Dep.target = this; // 标记当前watcher为Dep.target
const value = this.vm._data[expr]; // 假设vm._data是响应式数据
// 假设这里会触发响应式属性的getter，进而调用dep.depend()
return value;
}
// 更新函数，当依赖的属性变化时会被调用
update() {
// 这里可以执行DOM更新等逻辑
console.log('Watcher updated!');
this.cb(this.vm._data.message); // 假设更新与message属性相关
}
}
// 响应式属性的实现（简化版）
function defineReactive(obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
get() {
dep.depend(); // 依赖收集
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(); // 派发更新
}
});
}
// 示例
const vm = {
_data: {
message: 'Hello, Vue!'
}
};
// 使得_data的属性响应化
Object.keys(vm._data).forEach(key => {
defineReactive(vm._data, key, vm._data[key]);
});
// 创建一个watcher
new Watcher(vm, 'message', function(newValue) {
console.log(`New message value: ${
newValue}`);
});
// 模拟修改响应式属性
vm._data.message = 'Hello, World!'; // 这将触发watcher的update方法
在上述代码中，Dep类实现了依赖收集器的核心功能：它使用subscribers集合来存储所有订阅了当前依赖的观察者。depend方法用于将当前Dep.target（即当前正在计算的watcher）添加到订阅者集合中，实现依赖收集。而notify方法则遍历订阅者集合，调用每个观察者的update方法，实现派发更新。
Watcher类模拟了一个观察者，它在构造函数中通过get方法访问响应式属性，从而触发依赖收集。当响应式属性变化时，Dep实例的notify方法会被调用，进而通知所有订阅了该属性的观察者进行更新。
请注意，上述代码是高度简化和概念性的，并没有完全模拟Vue.js内部的实际实现。在实际应用中，Vue.js的响应式系统会更加复杂，包括处理数组变化、计算属性、侦听器等多种情况。不过，这段代码足以说明依赖收集器在Vue.js响应式系统中的作用和基本原理。
