很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。
我们都知道Dom操作是一个特别低性能的事儿，因为每一个dom节点中都包含了各种各样的属性及方法，每一次操作dom都是这些属性及方法一遍一遍的初始化，数量一多就特别的慢。
But，
状态的改变必须要对应视图的改变，就必须要操作到Dom
So,
越少的Dom操作就能越多的提升性能
这就是虚拟Dom能够带来的最大的好处。
但是，虚拟Dom是如何做到最少的去做Dom操作呢？
其实很简单，当状态变化时，只要更新对应变化的节点，而其他没有变化的节点，则不进行操作，这样就能最大限度的减少Dom操作。
而在Vue1.0的时候，是通过细粒度绑定来进行这项优化的，因为Vue在一定程度上是知道具体哪些状态发生了变化，也知道哪些节点使用了这个节点，这样就可以通过细粒度绑定直接更新视图。
但是这样也有副作用，粒度太细的话，会有更多的内存及依赖追踪的开销，这也是特别消耗性能的事儿。
那么，改为中粒度，当状态发生变化，通知到组件界别，而用一个对象（Vnode）去描述即将渲染的节点，一一对应，这样每次更新组件节点前，先对比新旧的两个（newVnode, oldVnode），找出需要改变的节点位置，然后单独更新这些节点，就能实现上述的功能。
这个对象就是Vnode。
Vnode其实就是一个普通的js对象，里面包含了描述节点内容的属性
在Vnode中有多种不同的节点类型：
不同的节点类型只是包含的属性值不一样而已，如一个 注释类型 的节点，对应的Vnode可能就是以下：
一个 文本节点 ，可能是以下：
我们明白了Vnode是真实Dom的描述对象，那么就能通过一个算法来计算出新旧Vnode之间的差异。
这个算法，我们就称之为patching算法。
我们冷静分析，对Dom进行操作，主要是需要做以下3件事儿：
4.1 新增节点
通常在组件初次渲染时，会发生新增节点，当oldVnode不存在，而newVnode存在时，这时只需要按照Vnode的描述去渲染视图即可。
具体的渲染过程可参考下图：
4.2 删除节点
当一个节点只在oldVnode中存在，而在newVnode中不存在时，这时我们要将改节点删除。这样就完成了变更视图的工作。
在删除节点中用到了一个nodeOps的对象，里面有一个removeVnodes的函数，主要用于对节点进行删除操作。
4.3 更新节点
前面两种情况都是比较简单，也很好理解
但是最常见是是 更新节点的 情况
具体流程如下图：
其中更新子节点也是 一个递归的过程。
我们下次再讲更新子节点。