Vue Dep.target为什么需要targetStack来管理？

Question

Dep.target = null;

var targetStack = [];

function **pushTarget** (_target) {

  if (Dep.target) { targetStack.push(Dep.target); }

  Dep.target = _target;

}

function **popTarget** () {

  Dep.target = targetStack.pop();

}

Watcher.prototype.get = function get () {

  **pushTarget(this)**;

  var value;

  var vm = this.vm;

  if (this.user) {

   

  } else {

 

  }

  if (this.deep) {

    

  }

  **popTarget();**

  this.cleanupDeps();

  return value

};

求教这样做的目的是什么？ 不能在选择依赖属性完直接将Dep.target设置为null吗？

Answer 1

如果没记错的话 target stack 是 Vue2 中才引入的机制，而 Vue1 中则是仅靠 Dep.target 来进行依赖收集的。根据我自己对 Vue1 和 Vue2 差异的理解，引入 target stack 的原因在于 Vue2 使用了新的视图更新方式。具体来说，vue1 视图更新采用的是细粒度绑定的方式，而 vue2 采取的是 virtual DOM 的方式。举个例子来说可能比较容易理解，对于下面的模版：<!-- root --><div>&nbsp; {{ a }}&nbsp; <my :text="b"></my>&nbsp; {{ c }}<div><!-- component my --><span>{{ b }}</span>Vue1 的处理方式可以简化理解为：watch(for a) -> directive(update {{ a }})watch(for b) -> directive(update {{ b }})watch(for c) -> directive(update {{ c }})由于是数据到 DOM 操作操作指令的细粒度绑定，所以不论是指令还是 watcher 都是原子化的。对于上面的模版，在处理完&nbsp;{{ a }}&nbsp;的视图绑定后，创建新的 vue 实例 my 并且处理&nbsp;{{ b }}&nbsp;的视图绑定，随后继续处理&nbsp;{{ c }}的绑定。而在 Vue2 中情况就完全不同，视图被抽象为一个 render 函数，一个 render 函数只会生成一个 watcher，其处理机制可以简化理解为：renderRoot () {&nbsp; &nbsp; ...&nbsp; &nbsp; renderMy ()&nbsp; &nbsp; ...}可以看到在 Vue2 中组件数的结构在视图渲染时就映射为 render 函数的嵌套调用，有嵌套调用就会有调用栈。当 evaluate root 时，调用到 my 的 render 函数，此时就需要中断 root 而进行 my 的 evaluate，当 my 的 evaluate 结束后 root 将会继续进行，这就是 target stack 的意义。