关于父子组件的watcher问题

Question

老师，能否介绍一下响应式数据的某个属性对应的watcher队列中，如果存在父子孙等渲染watcher的时候，子孙watcher是如何处理的。我觉得执行完父组件对应的watcher所对应的update方法之后，watcher队列里的子孙watcher是不是就可以销毁了。vue是如何处理这一块儿的啊。在源码里没找到呢

Answer 1

ustbhuangyi 2020-05-02 09:04:37

watcher 销毁的时机通常有 2 种，一种是 user watcher，你创建的时候会返回一个 unwatch 方法，用户主动调用，这个 watcher 会销毁；一种是组件销毁的时候，会把这个组件关联的所有 watcher 都销毁。
至于你说的这种情况，子孙组件除非销毁，否则对应 watcher 不应该被销毁。

• 提问者 Jesse1990 #1

  非常感谢！

• 提问者 Jesse1990 #2

  感谢老师的精彩解答，当时只是看到了从watcher队列里一个个拿出来依次执行了。没注意到这个watcher队列是个动态的。从watcher队列里拿出watcher，因为父组件在前，所以，肯定是先拿到的是父组件的watcher，然后在执行父组件的更新的时候，只有部分子组件是需要销毁的，在销毁子组件的最后阶段，销毁了子组件的watcher，从所有含有此子组件渲染watcher的dep中移除掉此watcher。

Answer 2

center_one 2020-05-17 11:09:08

父组件会在对应watcher执行update时通过patchVnode方法更新视图，这个更新的过程中，如果遍历到子组件，会先遍历到子组件的占位符vnode，该vnode的新旧值中children均为undefined,就不会深度遍历子组件的实例vnode(即占位符vnode.componentInstance).所以父组件watcher在视图上的更新内容不包括子组件，子组件的视图更新还是依赖于自身的watcher.update进行重新渲染。