Vue.js依赖收集与追踪机制深度剖析

本文目标

学完本文，你将能够：

• 理解Vue.js如何精确知道哪些组件需要更新
• 掌握Dep、Watcher、Observer三大核心类的协作机制
• 深入理解依赖收集的时机和完整过程
• 能够手写一个完整的依赖收集系统
• 解决实际开发中的依赖追踪问题

系列导航

上一篇: 响应式系统核心原理 | 下一篇: Virtual DOM实现详解

引言：为什么Vue知道哪些组件需要更新？

在使用Vue.js时，你是否想过这样一个问题：当我们修改一个数据时，Vue是如何精确地知道哪些组件用到了这个数据，并只更新这些组件的？

// 假设有这样的场景
const app = new Vue({
  data: {
    user: {
      name: 'John',
      age: 25
    }
  }
});

// 组件A只用到了user.name
// 组件B只用到了user.age
// 组件C同时用到了name和age

// 当我们修改user.name时
app.user.name = 'Jane';
// Vue如何知道只需要更新组件A和C，而不更新组件B？

这就是Vue.js依赖收集机制的神奇之处。让我们深入探索这个精妙的设计。

依赖收集的核心概念

什么是依赖？

在Vue.js中，"依赖"指的是数据和使用该数据的地方之间的关系。当一个组件的渲染函数中访问了某个响应式数据，我们就说这个组件"依赖"于这个数据。

三大核心角色

Vue.js的依赖收集机制主要由三个核心类协作完成：

1. Observer（观察者）：负责将普通对象转换为响应式对象
2. Dep（依赖管理器）：负责收集和管理依赖
3. Watcher（观察者）：代表一个依赖，当数据变化时执行相应的更新

依赖收集系统的完整实现

让我们从零开始实现一个完整的依赖收集系统，逐步理解其工作原理。

第一步：实现Dep类（依赖管理器）

// Dep类：依赖管理器
// 每个响应式属性都有一个对应的Dep实例
let uid = 0;

class Dep {
  constructor() {
    this.id = uid++;
    this.subs = []; // 存储所有依赖（Watcher实例）
  }
  
  // 添加依赖
  addSub(sub) {
    this.subs.push(sub);
  }
  
  // 移除依赖
  removeSub(sub) {
    const index = this.subs.indexOf(sub);
    if (index > -1) {
      this.subs.splice(index, 1);
    }
  }
  
  // 收集依赖
  depend() {
    if (Dep.target) {
      // Dep.target是当前正在执行的Watcher
      Dep.target.addDep(this);
    }
  }
  
  // 通知所有依赖更新
  notify() {
    // 复制一份，避免在更新过程中subs被修改
    const subs = this.subs.slice();
    console.log(`[Dep ${this.id}] 通知 ${subs.length} 个依赖更新`);
    
    for (let i = 0; i < subs.length; i++) {
      subs[i].update();
    }
  }
}

// 当前正在执行的Watcher
// 这是一个全局变量，用于依赖收集
Dep.target = null;

// 用于管理Dep.target的栈
const targetStack = [];

// 将当前Watcher推入栈中
function pushTarget(target) {
  targetStack.push(target);
  Dep.target = target;
}

// 将当前Watcher弹出栈
function popTarget() {
  targetStack.pop();
  Dep.target = targetStack[targetStack.length - 1];
}

第二步：实现Watcher类（观察者）

// Watcher类：观察者
// 代表一个需要在数据变化时执行的操作
let watcherId = 0;

class Watcher {
  constructor(vm, expOrFn, cb, options = {}) {
    this.vm = vm;
    this.id = watcherId++;
    
    // 执行函数（渲染函数或计算函数）
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      // 支持简单的属性路径，如 'user.name'
      this.getter = parsePath(expOrFn);
    }
    
    this.cb = cb; // 回调函数
    this.deep = !!options.deep; // 是否深度观察
    this.lazy = !!options.lazy; // 是否懒执行（用于计算属性）
    this.dirty = this.lazy; // 懒执行时的脏检查标志
    
    // 依赖相关
    this.deps = []; // 当前依赖列表
    this.newDeps = []; // 新的依赖列表
    this.depIds = new Set(); // 依赖id集合
    this.newDepIds = new Set(); // 新的依赖id集合
    
    // 立即执行一次，收集依赖
    this.value = this.lazy ? undefined : this.get();
  }
  
  // 执行getter，重新收集依赖
  get() {
    pushTarget(this); // 将自己设为当前target
    
    let value;
    const vm = this.vm;
    
    try {
      // 执行getter时会触发响应式数据的getter
      // 从而触发依赖收集
      value = this.getter.call(vm, vm);
    } catch (e) {
      console.error(`Watcher ${this.id} getter error:`, e);
    } finally {
      // 深度观察处理
      if (this.deep) {
        traverse(value); // 递归访问所有属性
      }
      
      popTarget(); // 恢复之前的target
      this.cleanupDeps(); // 清理依赖
    }
    
    return value;
  }
  
  // 添加依赖
  addDep(dep) {
    const id = dep.id;
    
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id);
      this.newDeps.push(dep);
      
      // 避免重复收集
      if (!this.depIds.has(id)) {
        dep.addSub(this);
      }
    }
  }
  
  // 清理不再需要的依赖
  cleanupDeps() {
    // 移除旧依赖中不在新依赖中的
    let i = this.deps.length;
    while (i--) {
      const dep = this.deps[i];
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this);
      }
    }
    
    // 交换deps和newDeps
    let tmp = this.depIds;
    this.depIds = this.newDepIds;
    this.newDepIds = tmp;
    this.newDepIds.clear();
    
    tmp = this.deps;
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.length = 0;
  }
  
  // 数据更新时调用
  update() {
    console.log(`[Watcher ${this.id}] 收到更新通知`);
    
    if (this.lazy) {
      // 懒执行模式，仅标记为dirty
      this.dirty = true;
    } else {
      // 将更新操作加入队列，异步执行
      queueWatcher(this);
    }
  }
  
  // 执行更新
  run() {
    const oldValue = this.value;
    this.value = this.get();
    
    if (oldValue !== this.value || isObject(this.value) || this.deep) {
      // 触发回调
      if (this.cb) {
        this.cb.call(this.vm, this.value, oldValue);
      }
    }
  }
  
  // 用于计算属性的求值
  evaluate() {
    this.value = this.get();
    this.dirty = false;
  }
  
  // 让当前Watcher的所有依赖也收集当前target
  depend() {
    let i = this.deps.length;
    while (i--) {
      this.deps[i].depend();
    }
  }
}

// 解析简单路径
function parsePath(path) {
  const segments = path.split('.');
  return function(obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return;
      obj = obj[segments[i]];
    }
    return obj;
  };
}

// 深度遍历对象
function traverse(val) {
  const seenObjects = new Set();
  
  function _traverse(val, seen) {
    if (!isObject(val) || val.__v_skip) {
      return;
    }
    
    if (seen.has(val)) {
      return; // 避免循环引用
    }
    seen.add(val);
    
    if (Array.isArray(val)) {
      for (let i = 0; i < val.length; i++) {
        _traverse(val[i], seen);
      }
    } else {
      const keys = Object.keys(val);
      for (let i = 0; i < keys.length; i++) {
        _traverse(val[keys[i]], seen);
      }
    }
  }
  
  _traverse(val, seenObjects);
}

第三步：实现Observer类（观察者）

// Observer类：将普通对象转换为响应式对象
class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep(); // 用于数组和对象本身的依赖收集
    
    // 给对象添加__ob__属性，指向Observer实例
    def(value, '__ob__', this);
    
    if (Array.isArray(value)) {
      // 处理数组
      this.observeArray(value);
      // 重写数组方法
      protoAugment(value, arrayMethods);
    } else {
      // 处理对象
      this.walk(value);
    }
  }
  
  // 遍历对象的所有属性，使其响应式
  walk(obj) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }
  
  // 观察数组中的每个元素
  observeArray(items) {
    for (let i = 0; i < items.length; i++) {
      observe(items[i]);
    }
  }
}

// 尝试为value创建一个Observer实例
function observe(value) {
  if (!isObject(value)) {
    return;
  }
  
  let ob;
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  
  return ob;
}

// 定义响应式属性
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性都有自己的dep
  
  // 获取属性描述符
  const property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return;
  }
  
  // 保存原有的getter/setter
  const getter = property && property.get;
  const setter = property && property.set;
  
  // 如果没有getter但有setter，需要通过obj[key]获取初始值
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }
  
  // 递归观察子对象
  let childOb = observe(val);
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 如果原本有getter，使用原getter的返回值
      const value = getter ? getter.call(obj) : val;
      
      // 依赖收集的关键时机！
      if (Dep.target) {
        console.log(`[Getter] 属性 "${key}" 被访问，收集依赖`);
        dep.depend(); // 收集依赖
        
        if (childOb) {
          // 子对象也收集依赖
          childOb.dep.depend();
          
          // 如果是数组，需要对数组元素进行依赖收集
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      
      return value;
    },
    set: function reactiveSetter(newVal) {
      // 获取旧值
      const value = getter ? getter.call(obj) : val;
      
      // 值没有变化，直接返回
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return;
      }
      
      console.log(`[Setter] 属性 "${key}" 被修改: ${value} -> ${newVal}`);
      
      // 如果原本有setter，调用原setter
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      
      // 对新值进行观察
      childOb = observe(newVal);
      
      // 通知所有依赖更新
      dep.notify();
    }
  });
}

// 数组依赖收集
function dependArray(value) {
  for (let i = 0; i < value.length; i++) {
    const item = value[i];
    if (item && item.__ob__) {
      item.__ob__.dep.depend();
    }
    if (Array.isArray(item)) {
      dependArray(item);
    }
  }
}

第四步：实现更新队列（异步更新）

// 更新队列，避免同一个Watcher被多次触发
const queue = [];
const has = {};
let waiting = false;
let flushing = false;
let index = 0;

// 将Watcher加入更新队列
function queueWatcher(watcher) {
  const id = watcher.id;
  
  // 避免重复加入
  if (has[id] == null) {
    has[id] = true;
    
    if (!flushing) {
      queue.push(watcher);
    } else {
      // 如果正在刷新队列，将watcher插入到合适的位置
      let i = queue.length - 1;
      while (i > index && queue[i].id > watcher.id) {
        i--;
      }
      queue.splice(i + 1, 0, watcher);
    }
    
    // 开始异步更新
    if (!waiting) {
      waiting = true;
      
      // 在下一个tick执行更新
      nextTick(flushSchedulerQueue);
    }
  }
}

// 刷新更新队列
function flushSchedulerQueue() {
  flushing = true;
  let watcher, id;
  
  // 按id排序，确保：
  // 1. 父组件先于子组件更新
  // 2. 用户watcher先于渲染watcher执行
  // 3. 如果父组件watcher执行时销毁了子组件，可以跳过子组件watcher
  queue.sort((a, b) => a.id - b.id);
  
  // 不缓存queue.length，因为在执行watcher时可能会有新的watcher加入
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    id = watcher.id;
    has[id] = null;
    
    console.log(`[Scheduler] 执行Watcher ${id} 的更新`);
    watcher.run();
  }
  
  // 重置状态
  resetSchedulerState();
  
  console.log('[Scheduler] 更新队列执行完毕');
}

// 重置调度器状态
function resetSchedulerState() {
  index = queue.length = 0;
  has = {};
  waiting = flushing = false;
}

// 简化版的nextTick实现
function nextTick(cb) {
  return Promise.resolve().then(cb);
}

依赖收集的完整流程

现在让我们通过一个完整的示例来理解依赖收集的全过程：

// 完整的使用示例
class MiniVue {
  constructor(options) {
    this.$options = options;
    this._data = options.data;
    
    // 代理data到vm实例上
    Object.keys(this._data).forEach(key => {
      proxy(this, '_data', key);
    });
    
    // 观察数据
    observe(this._data);
    
    // 创建渲染Watcher
    new Watcher(this, options.render, () => {
      console.log('[渲染Watcher] 视图需要更新');
    });
  }
}

// 代理函数
function proxy(target, sourceKey, key) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get() {
      return target[sourceKey][key];
    },
    set(val) {
      target[sourceKey][key] = val;
    }
  });
}

// 测试依赖收集
const vm = new MiniVue({
  data: {
    message: 'Hello',
    user: {
      name: 'John',
      age: 25
    },
    items: [1, 2, 3]
  },
  render() {
    // 模拟渲染函数，访问数据
    console.log(`[Render] 渲染视图: ${this.message}, ${this.user.name}`);
    return `<div>${this.message} ${this.user.name}</div>`;
  }
});

// 创建一个计算属性Watcher
const computedWatcher = new Watcher(vm, function() {
  return this.user.name + ' - ' + this.user.age;
}, null, { lazy: true });

// 创建一个监听Watcher
const watchWatcher = new Watcher(vm, 'user.name', function(newVal, oldVal) {
  console.log(`[Watch] user.name changed: ${oldVal} -> ${newVal}`);
});

// 测试数据修改
console.log('\n--- 修改message ---');
vm.message = 'Hi';

console.log('\n--- 修改user.name ---');
vm.user.name = 'Jane';

console.log('\n--- 修改user.age ---');
vm.user.age = 30;

解决复杂场景

1. 循环依赖问题

在实际应用中，可能会遇到循环依赖的情况：

// 循环依赖示例
const vm = new MiniVue({
  data: {
    a: 1
  },
  computed: {
    b() {
      return this.a + this.c;
    },
    c() {
      return this.b + 1; // 循环依赖！
    }
  }
});

// 解决方案：使用依赖追踪避免无限循环
class ComputedWatcher extends Watcher {
  constructor(vm, getter, options) {
    super(vm, getter, null, { ...options, lazy: true });
    this.computing = false; // 标记是否正在计算
  }
  
  evaluate() {
    if (this.computing) {
      console.warn(`[Warning] 检测到循环依赖: ${this.getter.name}`);
      return this.value;
    }
    
    this.computing = true;
    this.value = this.get();
    this.dirty = false;
    this.computing = false;
    
    return this.value;
  }
}

2. 动态添加响应式属性

Vue.js 2.x 无法检测到动态添加的属性，需要特殊处理：

// Vue.set的实现
function set(target, key, val) {
  // 处理数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  
  // 已存在的属性，直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  
  const ob = target.__ob__;
  
  // 非响应式对象，直接赋值
  if (!ob) {
    target[key] = val;
    return val;
  }
  
  // 添加响应式属性
  defineReactive(ob.value, key, val);
  ob.dep.notify(); // 通知对象的依赖更新
  
  return val;
}

// 使用示例
const vm = new MiniVue({
  data: {
    user: {
      name: 'John'
    }
  }
});

// 动态添加响应式属性
set(vm.user, 'email', '[email protected]');

3. 数组变化检测

Vue.js通过重写数组方法来实现数组变化检测：

// 需要重写的数组方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

// 创建数组方法拦截器
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

methodsToPatch.forEach(function(method) {
  const original = arrayProto[method];
  
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args);
    const ob = this.__ob__;
    
    let inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        inserted = args.slice(2);
        break;
    }
    
    // 对新增的元素进行观察
    if (inserted) ob.observeArray(inserted);
    
    // 通知变化
    console.log(`[Array] 方法 "${method}" 被调用`);
    ob.dep.notify();
    
    return result;
  });
});

// 工具函数
function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

function protoAugment(target, src) {
  target.__proto__ = src;
}

调试技巧和性能优化

1. 依赖追踪调试

// 添加调试工具
class DebugWatcher extends Watcher {
  constructor(...args) {
    super(...args);
    this.debugName = args[3]?.debugName || `Watcher${this.id}`;
  }
  
  addDep(dep) {
    console.log(`[Debug] ${this.debugName} 收集依赖 Dep${dep.id}`);
    super.addDep(dep);
  }
  
  update() {
    console.log(`[Debug] ${this.debugName} 收到更新通知`);
    super.update();
  }
  
  run() {
    console.time(`[Debug] ${this.debugName} 执行更新`);
    super.run();
    console.timeEnd(`[Debug] ${this.debugName} 执行更新`);
  }
}

// 可视化依赖关系
function visualizeDeps(vm) {
  const deps = new Map();
  const watchers = new Map();
  
  // 收集所有的Dep和Watcher
  function collectDep(obj, path = '') {
    if (!isObject(obj)) return;
    
    if (obj.__ob__) {
      const dep = obj.__ob__.dep;
      deps.set(dep.id, {
        path: path || 'root',
        subs: dep.subs.map(w => w.id)
      });
    }
    
    Object.keys(obj).forEach(key => {
      const val = obj[key];
      const descriptor = Object.getOwnPropertyDescriptor(obj, key);
      
      if (descriptor && descriptor.get && descriptor.get._computedWatcher) {
        const watcher = descriptor.get._computedWatcher;
        watchers.set(watcher.id, {
          type: 'computed',
          path: `${path}.${key}`,
          deps: watcher.deps.map(d => d.id)
        });
      }
      
      if (isObject(val)) {
        collectDep(val, path ? `${path}.${key}` : key);
      }
    });
  }
  
  collectDep(vm._data);
  
  console.log('=== 依赖关系图 ===');
  console.log('Deps:', deps);
  console.log('Watchers:', watchers);
  
  return { deps, watchers };
}

2. 性能优化建议

// 1. 避免不必要的依赖收集
class OptimizedWatcher extends Watcher {
  constructor(vm, expOrFn, cb, options = {}) {
    super(vm, expOrFn, cb, options);
    
    // 添加依赖收集开关
    this.shouldCollect = true;
  }
  
  get() {
    if (!this.shouldCollect) {
      // 临时禁用依赖收集
      const result = this.getter.call(this.vm, this.vm);
      return result;
    }
    
    return super.get();
  }
  
  // 手动控制依赖收集
  disableCollection(fn) {
    this.shouldCollect = false;
    const result = fn();
    this.shouldCollect = true;
    return result;
  }
}

// 2. 批量更新优化
class BatchUpdater {
  constructor() {
    this.queue = [];
    this.has = {};
    this.pending = false;
  }
  
  push(watcher) {
    const id = watcher.id;
    if (!this.has[id]) {
      this.has[id] = true;
      this.queue.push(watcher);
      
      if (!this.pending) {
        this.pending = true;
        Promise.resolve().then(() => this.flush());
      }
    }
  }
  
  flush() {
    this.pending = false;
    const queue = this.queue.slice();
    this.queue = [];
    this.has = {};
    
    // 批量执行更新
    queue.sort((a, b) => a.id - b.id);
    queue.forEach(watcher => watcher.run());
  }
}

// 3. 大数据集优化
function optimizeForLargeData(data, options = {}) {
  const { 
    maxDepth = 3,           // 最大观察深度
    ignoreKeys = [],        // 忽略的键
    lazyKeys = []          // 延迟观察的键
  } = options;
  
  function shouldObserve(val, key, depth) {
    if (depth > maxDepth) return false;
    if (ignoreKeys.includes(key)) return false;
    if (!isObject(val)) return false;
    
    // 大数组延迟观察
    if (Array.isArray(val) && val.length > 1000) {
      console.warn(`[Performance] 大数组 "${key}" (length: ${val.length}) 建议使用虚拟滚动`);
      return false;
    }
    
    return true;
  }
  
  function observeWithOptions(val, depth = 0) {
    if (!shouldObserve(val, '', depth)) return;
    
    const ob = new Observer(val);
    
    if (val && typeof val === 'object') {
      Object.keys(val).forEach(key => {
        if (shouldObserve(val[key], key, depth + 1)) {
          observeWithOptions(val[key], depth + 1);
        }
      });
    }
    
    return ob;
  }
  
  return observeWithOptions(data);
}

总结

通过本文的深入剖析，我们完整地理解了Vue.js依赖收集机制的工作原理：

1. 依赖收集的时机：在Watcher执行getter函数时，会访问响应式数据，触发数据的getter，此时进行依赖收集

2. 三者协作关系：

   • Observer负责将数据转换为响应式
   • Dep负责管理依赖关系
   • Watcher代表一个具体的依赖

3. 更新流程：数据变化 - 触发setter - Dep通知所有Watcher - Watcher执行更新

4. 性能优化要点：

   • 使用异步更新队列避免重复更新
   • 合理控制观察深度
   • 对大数据集进行特殊处理

理解了依赖收集机制，你就掌握了Vue.js响应式系统的核心。这个设计不仅优雅地解决了数据和视图的同步问题，还为我们提供了很多架构设计的启发。

练习题

1. 尝试实现一个支持数组索引访问的依赖收集系统
2. 设计一个可以可视化展示依赖关系的调试工具
3. 优化Watcher，支持条件性依赖收集（只在特定条件下收集依赖）

相关文章

• 响应式系统核心原理 - 了解数据劫持的基础
• Virtual DOM实现详解 - 理解视图更新的下一步
• 异步更新与nextTick - 深入异步更新机制

下一篇，我们将探索Virtual DOM的设计与实现，理解Vue.js如何高效地将数据变化转换为DOM更新。