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>
  {{ a }}
  <my :text="b"></my>
  {{ 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 都是原子化的。对于上面的模版，在处理完 {{ a }} 的视图绑定后，创建新的 vue 实例 my 并且处理 {{ b }} 的视图绑定，随后继续处理 {{ c }}的绑定。

而在 Vue2 中情况就完全不同，视图被抽象为一个 render 函数，一个 render 函数只会生成一个 watcher，其处理机制可以简化理解为：

renderRoot () {
    ...
    renderMy ()
    ...
}

可以看到在 Vue2 中组件数的结构在视图渲染时就映射为 render 函数的嵌套调用，有嵌套调用就会有调用栈。当 evaluate root 时，调用到 my 的 render 函数，此时就需要中断 root 而进行 my 的 evaluate，当 my 的 evaluate 结束后 root 将会继续进行，这就是 target stack 的意义。