【Vue2深度学习】虚拟DOM篇-Patch主流程

虚拟DOM最核心的部分是patch，它通过Vue-Diff算法，比对新旧两个vnode之间有哪些不同，然后根据比对结果找出需要更新的节点进行更新，最终将vnode渲染成真实的DOM。整个patch的过程，其实就是创建节点、删除节点和修改节点的过程。

创建节点

当因状态改变而新增的节点在DOM中并不存在时，我们需要创建一个节点并插入到DOM中。即当oldVnode不存在而vnode存在时，就需要使用vnode生成真实的DOM元素并将其插入到视图当中。

创建新增的节点主要有以下两种场景：

场景1：

首次渲染时，DOM中不存在任何节点，即oldVnode是不存在的，我们需要使用vnode创建一个新DOM节点并渲染视图。

场景2：

当vnode 和oldVnode完全不是同一个节点时，即oldVnode是一个被废弃的节点，vnode是一个全新的节点，此时，我们需要使用vnode创建一个新DOM节点，用它去替换oldVnode所对应的真实DOM节点。

• 如何创建节点

因vnode是有类型的，所以当我们在创建节点时，最重要的事是根据vnode的类型来创建出相同类型的DOM元素。

事实上，只有三种类型的节点会被创建并插入到DOM中：元素节点、注释节点和文本节点。

0.创建元素节点判断vnode是否是元素节点，只需要判断它是否具有tag属性。如果一个vnode具有tag属性，就认为它是元素节点，然后我们调用当前环境下的createElement方法来创建真实的元素节点。1.创建注释节点当发现一个vnode的tag属性不存在时，可以用isComment属性来判断它是注释节点还是文本节点。如果是注