简述Vue的虚拟Dom的patching过程

很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。

1，为什么要用虚拟Dom

我们都知道Dom操作是一个特别低性能的事儿，因为每一个dom节点中都包含了各种各样的属性及方法，每一次操作dom都是这些属性及方法一遍一遍的初始化，数量一多就特别的慢。
But，
状态的改变必须要对应视图的改变，就必须要操作到Dom
So,
越少的Dom操作就能越多的提升性能

这就是虚拟Dom能够带来的最大的好处。
但是，虚拟Dom是如何做到最少的去做Dom操作呢？

2，认识一下Vnode

其实很简单，当状态变化时，只要更新对应变化的节点，而其他没有变化的节点，则不进行操作，这样就能最大限度的减少Dom操作。
而在Vue1.0的时候，是通过细粒度绑定来进行这项优化的，因为Vue在一定程度上是知道具体哪些状态发生了变化，也知道哪些节点使用了这个节点，这样就可以通过细粒度绑定直接更新视图。
但是这样也有副作用，粒度太细的话，会有更多的内存及依赖追踪的开销，这也是特别消耗性能的事儿。

那么，改为中粒度，当状态发生变化，通知到组件界别，而用一个对象（Vnode）去描述即将渲染的节点，一一对应，这样每次更新组件节点前，先对比新旧的两个（newVnode, oldVnode），找出需要改变的节点位置，然后单独更新这些节点，就能实现上述的功能。

这个对象就是Vnode。

3，关键在于如何找出oldVnode和newVnode之间的差异

Vnode其实就是一个普通的js对象，里面包含了描述节点内容的属性
在Vnode中有多种不同的节点类型：

注释类型
文本节点
元素节点
组件节点
函数式组件
克隆节点

不同的节点类型只是包含的属性值不一样而已，如一个注释类型的节点，对应的Vnode可能就是以下：

{
  text: '我是注释文本',
  isComment: true
}

一个文本节点，可能是以下：

{
  text: 'hello world'
}

我们明白了Vnode是真实Dom的描述对象，那么就能通过一个算法来计算出新旧Vnode之间的差异。
这个算法，我们就称之为patching算法。

4，patching算法原理

我们冷静分析，对Dom进行操作，主要是需要做以下3件事儿：

新增节点
删除节点
修改节点

4.1 新增节点
通常在组件初次渲染时，会发生新增节点，当oldVnode不存在，而newVnode存在时，这时只需要按照Vnode的描述去渲染视图即可。
具体的渲染过程可参考下图：

创建节点的流程

4.2 删除节点
当一个节点只在oldVnode中存在，而在newVnode中不存在时，这时我们要将改节点删除。这样就完成了变更视图的工作。
在删除节点中用到了一个nodeOps的对象，里面有一个removeVnodes的函数，主要用于对节点进行删除操作。

4.3 更新节点

前面两种情况都是比较简单，也很好理解
但是最常见是是 更新节点的 情况
具体流程如下图：

更新节点流程

其中更新子节点也是 一个递归的过程。
我们下次再讲更新子节点。