Vue依赖收集机制

2025-07-09

1333 字约 5 分钟

...

Vue响应式系统的核心问题

当我们修改Vue组件中的数据时，视图会自动更新——这看似神奇的背后，是Vue强大的响应式系统在发挥作用。而这个系统的核心，正是依赖收集机制。本文将深入探索Vue是如何追踪数据变化并高效更新DOM的。

<div class="vue-dependency-illustration">
  <div class="data-property">数据属性</div>
  <div class="dependency-collector">依赖收集器</div>
  <div class="watcher">观察者（Watcher）</div>
  <div class="component">Vue组件</div>
  
  <div class="connections">
    <div class="conn conn1"></div>
    <div class="conn conn2"></div>
    <div class="conn conn3"></div>
    <div class="conn conn4"></div>
    <div class="conn conn5"></div>
  </div>
</div>

1. Vue响应式基础：三个核心概念

1.1 响应式数据对象（Reactive Data）

Vue通过Object.defineProperty（Vue 2）或Proxy（Vue 3）将普通JS对象转换为响应式对象：

function defineReactive(obj, key) {
  let value = obj[key];
  const dep = new Dep(); 
  
  Object.defineProperty(obj, key, {
    get() {
      
      if (Dep.target) {
        dep.depend();
      }
      return value;
    },
    set(newVal) {
      if (newVal === value) return;
      value = newVal;
      
      dep.notify();
    }
  });
}

1.2 依赖收集器（Dep）

每个响应式属性都有一个Dep实例，负责管理所有依赖该属性的"订阅者"（Watcher）：

class Dep {
  constructor() {
    this.subs = []; 
  }
  
  addSub(sub) {
    this.subs.push(sub);
  }
  
  removeSub(sub) {
    remove(this.subs, sub);
  }
  
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }
  
  notify() {
    const subs = this.subs.slice();
    for (let i = 0; i < subs.length; i++) {
      subs[i].update(); 
    }
  }
}

Dep.target = null;

1.3 观察者（Watcher）

Watcher是Vue中观察数据变化的实体，代表一个可执行单元（如组件渲染函数、计算属性等）：

class Watcher {
  constructor(vm, expOrFn) {
    this.vm = vm;
    this.getter = expOrFn;
    this.deps = []; 
    this.value = this.get();
  }
  
  get() {
    pushTarget(this); 
    let value;
    try {
      value = this.getter.call(this.vm);
    } finally {
      popTarget(); 
    }
    return value;
  }
  
  addDep(dep) {
    if (!this.deps.includes(dep)) {
      this.deps.push(dep);
      dep.addSub(this);
    }
  }
  
  update() {
    queueWatcher(this); 
  }
  
  run() {
    const value = this.get();
    if (value !== this.value) {
      
      this.value = value;
    }
  }
}


const targetStack = [];
function pushTarget(target) {
  targetStack.push(target);
  Dep.target = target;
}
function popTarget() {
  targetStack.pop();
  Dep.target = targetStack[targetStack.length - 1];
}

2. 依赖收集的完整流程

2.1 初始化阶段

fba01c87ac96fc5559dad35a8552461b.png

2.2 依赖收集阶段

739ecdba6fbfb58a49d3db2f005eeec9.png

2.3 更新触发阶段

146fd45761b4e22eb8545b384dc87696.png

3. Vue 2 vs Vue 3实现差异

特性	Vue 2	Vue 3
核心API	`Object.defineProperty`	`Proxy`
数组支持	需要特殊处理	原生支持
新增属性	`Vue.set`/`vm.$set`	原生响应
性能	递归对象属性	惰性处理
依赖收集	基于属性的Dep	基于Proxy的track/trigger

Vue 3的依赖收集实现

const targetMap = new WeakMap();

function track(target, type, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  
  
  if (activeEffect) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

function trigger(target, type, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  
  const effects = new Set();
  depsMap.get(key).forEach(effect => {
    effects.add(effect);
  });
  
  effects.forEach(effect => {
    if (effect.options.scheduler) {
      effect.options.scheduler(effect);
    } else {
      effect();
    }
  });
}

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, 'get', key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, 'set', key);
      }
      return result;
    }
  });
};

4. 关键设计细节解析

4.1 异步更新队列

Vue使用nextTick实现异步更新：

const queue = [];
let waiting = false;

function queueWatcher(watcher) {
  if (queue.includes(watcher)) return;
  
  queue.push(watcher);
  
  if (!waiting) {
    waiting = true;
    nextTick(flushSchedulerQueue);
  }
}

function flushSchedulerQueue() {
  const watchers = queue.slice().sort();
  queue.length = 0;
  
  for (let i = 0; i < watchers.length; i++) {
    watchers[i].run();
  }
  
  waiting = false;
}

4.2 依赖清除机制

当组件销毁或计算属性重新计算时，需要清理旧依赖：

class Watcher {
  constructor() {
    
  }
  
  teardown() {
    
    for (let i = this.deps.length - 1; i >= 0; i--) {
      this.deps[i].removeSub(this);
    }
    this.deps = [];
  }
  
  get() {
    
    this.cleanupDeps();
    
  }
  
  cleanupDeps() {
    for (let i = 0; i < this.deps.length; i++) {
      const dep = this.deps[i];
      if (!this.newDeps.has(dep)) {
        dep.removeSub(this);
      }
    }
    
    
    let tmp = this.deps;
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.clear();
  }
}

5. 依赖收集在Vue生态系统中的应用

5.1 组件渲染系统

20e264c52ab30bfcf93d7c9fcf34fd29.png

5.2 计算属性和侦听器

计算属性：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

实现逻辑：

为计算属性创建计算Watcher
计算时访问的依赖项会被收集
依赖变化时重新计算，但只在实际使用的地方重新执行（惰性计算）

侦听器：

watch: {
  'person.age': function(newVal, oldVal) {
    console.log('Age changed');
  }
}

实现特点：

为每个侦听属性创建UserWatcher
支持deep选项：递归遍历对象属性
支持immediate选项：立即执行一次

6. 性能优化策略

6.1 避免不必要的响应式

this.config = Object.freeze({ apiUrl: 'https://...' });



this.bigData = {  }


this.dataPart1 = {  }
this.dataPart2 = {  }

6.2 合理使用v-once

<div v-once>公司名称：{{ companyName }}</div>

6.3 优化Watcher创建

Vue.component('functional-comp', {
  functional: true,
  render(h, ctx) {
    
    return h('div', ctx.props.data);
  }
})


<!-- 不推荐 -->
<div>{{ expensiveComputation() }}</div>

<!-- 推荐 -->
<div>{{ computedResult }}</div>

6.4 优化列表渲染

<li v-for="item in items" :key="item.id">{{ item.text }}</li>



<li v-for="item in items" v-if="item.active"></li>


<li v-for="item in activeItems"></li>

7. 实战：依赖收集可视化调试

<div id="dependency-debug">
  <button @click="addDep">添加依赖</button>
  <div class="dependencies">
    <div v-for="(dep, key) in depsInfo" class="dep-item">
      <div class="key">{{ key }}: {{ dep.value }}</div>
      <div class="subs">
        <span v-for="(sub, i) in dep.subs" :key="i" class="watcher-badge">Watcher-{{ i+1 }}</span>
      </div>
    </div>
  </div>
</div>

<script>

function createDepTracker(Vue) {
  const originalDefineReactive = Vue.util.defineReactive;
  
  Vue.util.defineReactive = function(obj, key, val) {
    const dep = new Vue.util.Dep();
    
    
    if (!obj.__deps) obj.__deps = {};
    obj.__deps[key] = dep;
    
    const getter = () => {
      if (Dep.target) {
        dep.depend();
      }
      return val;
    };
    
    const setter = (newVal) => {
      val = newVal;
      dep.notify();
    };
    
    Object.defineProperty(obj, key, {
      get: getter,
      set: setter
    });
  };
  
  return {
    getDeps(instance) {
      return instance._data.__deps || {};
    }
  };
}
</script>