前言
我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。
例子
举例来说 这样的一个组件：
<template>
<div>
{{ msg }}
<ChildComponent />
</div>
</template>
我们在触发 this.msg = ‘Hello, Changed~’的时候，会触发组件的更新，视图的重新渲染。
但是 <ChildComponent /> 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。
在以前的一段时间里，我曾经认为因为组件是一棵树，所以它的更新就是理所当然的深度遍历这棵树，进行递归更新。本篇就从源码的角度带你一起分析，Vue 是怎么做到精确更新的。
React的更新粒度
而 React 在类似的场景下是自顶向下的进行递归更新的，也就是说，React 中假如 ChildComponent 里还有十层嵌套子元素，那么所有层次都会递归的重新render（在不进行手动优化的情况下），这是性能上的灾难。（因此，React 创造了Fiber，创造了异步渲染，其实本质上是弥补被自己搞砸了的性能）。
他们能用收集依赖的这套体系吗？不能，因为他们遵从Immutable的设计思想，永远不在原对象上修改属性，那么基于Object.defineProperty 或 Proxy 的响应式依赖收集机制就无从下手了（你永远返回一个新的对象，我哪知道你修改了旧对象的哪部分？）
同时，由于没有响应式的收集依赖，React 只能递归的把所有子组件都重新 render一遍（除了memo和shouldComponentUpdate这些优化手段），然后再通过 diff算法 决定要更新哪部分的视图，这个递归的过程叫做 reconciler，听起来很酷，但是性能很灾难。
Vue的更新粒度
那么，Vue 这种精确的更新是怎么做的呢？其实每个组件都有自己的渲染 watcher，它掌管了当前组件的视图更新，但是并不会掌管 ChildComponent 的更新。
具体到源码中，是怎么样实现的呢？
在 patch 的过程中，当组件更新到ChildComponent的时候，会走到patchVnode，那么这个方法大致做了哪些事情呢？
patchVnode
执行 vnode 的 prepatch 钩子。
注意，只有 组件vnode 才会有 prepatch 这个生命周期，
这里会走到updateChildComponent方法，这个 child 具体指什么呢？
prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
const options = vnode.componentOptions
// 注意 这个child就是ChildComponent组件的 vm 实例，也就是咱们平常用的 this
const child = vnode.componentInstance = oldVnode.componentInstance
