本文基于vue-2.4.4源码进行分析
Vue 2.0开始，引入VirtualDOM。
使用VirtualDOM而不使用真实DOM是出于性能优化的考虑。
真实DOM使用document.createElement创建DOM元素，但是这个方法会带来性能上的损失。
举个例子：
let div = document.createElement('div');
let count = 0
for(let k in div) {
count++
}
console.log(count) // 231
执行上面的代码，我们可以看到该方法创建的DOM元素的属性多达231个，但是我们真正需要的可能只有不到10%。
为了解决这个问题，VirtualDOM应运而生。它和真实DOM保持映射关系，每个VNode节点都存储了对应真实DOM节点的一些重要参数，当数据发生改变时，在改变真实DOM节点之前，会先比较相应的VNode的的数据，如果需要改变，才更新真实DOM。这样就可以通过操作VirtualDOM来提高直接操作DOM的效率和性能。
比较VNode数据这个操作就是我们今天要讨论的patch，在讨论之前，我们先简单说下VNode。
VNode
在上篇Vue 2.0 模板编译源码分析中我们得出模板编译的结果是render function。
render function的运行结果就是VNode， 参考src/core/instance/render.js
Vue.prototype._render = function (): VNode {
...
const {
render,
staticRenderFns,
_parentVnode
} = vm.$options
...
vnode = render.call(vm._renderProxy, vm.$createElement)
...
}
Vue 2.0中的VNode(src/core/vdom/vnode.js)定义如下：
export default class VNode {
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
this.tag = tag // 元素标签
this.data = data // 属性
this.children = children // 子元素列表
this.text = text
this.elm = elm // 对应的真实 DOM 元素
this.ns = undefined
this.context = context
this.functionalContext = undefined
this.key = data && data.key
this.componentOptions = componentOptions
this.componentInstance = undefined
this.parent = undefined
this.raw = false
this.isStatic = false // 是否被标记为静态节点
this.isRootInsert = true
this.isComment = false
this.isCloned = false
this.isOnce = false
this.asyncFactory = asyncFactory
this.asyncMeta = undefined
this.isAsyncPlaceholder = false
}
}
它是真实DOM的简化版，与真实DOM一一对映。通过new实例化的VNode可以分为：EmptyVNode（注释节点）、TextVNode（文本节点）、ElementVNode（元素节点）、ComponentVNode（组件节点）、CloneVNode（克隆节点）等。
patch原理
再拉通一下整个思路，目前我们晓得
render function 生成 VNode，是在 vm._render 里完成的。
那么vm._render方法又是在什么时候调用的呢？
debugger一下代码，可以看到流程如下：
初始化时，通过render function 生成 VNode的同时进行Watcher的绑定。当数据发生会变化时，会执行_update方法，生成一个新的VNode对象，然后调用__patch__方法，比较新生成的VNode和旧的VNode，最后将差异（变化的节点）更新到真实的DOM树上。
patch(src/core/vdom/patch.js)所用的diff算法来源于snabbdom，只会在同层级进行比较，不会跨层级比较。图示如下：
下面结合源码进行原理分析：
入参
patch方法接收6个参数：
function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
...
}
-
oldVnode: 旧的VNode或旧的真实DOM节点 -
vnode: 新的VNode -
hydrating: 是否要和真实DOM混合 -
removeOnly: 特殊的flag，用于<transition-group> -
parentElm: 父节点 -
refElm: 新节点将插入到refElm之前
流程
-
如果
vnode不存在，但是oldVnode存在，说明是需要销毁旧节点，则调用invokeDestroyHook(oldVnode)来销毁oldVnode。if (isUndef(vnode)) { if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return } -
如果
vnode存在，但是oldVnode不存在，说明是需要创建新节点，则调用createElm来创建新节点。if (isUndef(oldVnode)) { isInitialPatch = true // 用于做延迟插值处理 createElm(vnode, insertedVnodeQueue, parentElm, refElm) } 当
vnode和oldVnode都存在时
3.1 如果oldVnode不是真实节点，并且
vnode和oldVnode是同一节点时，说明是需要比较新旧节点，则调用patchVnode进行patch。-
3.2 如果
oldVnode是真实节点时- 3.2.1 如果oldVnode是元素节点，且含有
data-server-rendered属性时，移除该属性，并设置hydrating为true。 - 3.2.2 如果
hydrating为true时，调用hydrate方法，将Virtural DOM与真实DOM进行映射，然后将oldVnode设置为对应的Virtual DOM。
- 3.2.1 如果oldVnode是元素节点，且含有
-
3.3 如果
oldVnode是真实节点时或vnode和oldVnode不是同一节点时，找到oldVnode.elm的父节点，根据vnode创建一个真实的DOM节点，并插入到该父节点中的oldVnode.elm位置。如果组件根节点被替换，遍历更新父节点element。然后移除旧节点。{ // 3. 当vnode和oldVnode都存在时 const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // 3.1 如果oldVnode不是真实节点，并且vnode和oldVnode是同一节点时 // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) } else { if (isRealElement) { // 3.2 如果oldVnode是真实节点时 // mounting to a real element // check if this is server-rendered content and if we can perform // a successful hydration. if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) { // 3.2.1 如果oldVnode是元素节点，且含有`data-server-rendered`属性时 oldVnode.removeAttribute(SSR_ATTR) hydrating = true } if (isTrue(hydrating)) { // 3.2.2 如果hydrating为true时 if (hydrate(oldVnode, vnode, insertedVnodeQueue)) { invokeInsertHook(vnode, insertedVnodeQueue, true) return oldVnode } else if (process.env.NODE_ENV !== 'production') { warn( 'The client-side rendered virtual DOM tree is not matching ' + 'server-rendered content. This is likely caused by incorrect ' + 'HTML markup, for example nesting block-level elements inside ' + '<p>, or missing <tbody>. Bailing hydration and performing ' + 'full client-side render.' ) } } // either not server-rendered, or hydration failed. // create an empty node and replace it oldVnode = emptyNodeAt(oldVnode) } // 3.3 // replacing existing element const oldElm = oldVnode.elm const parentElm = nodeOps.parentNode(oldElm) createElm( vnode, insertedVnodeQueue, oldElm._leaveCb ? null : parentElm, nodeOps.nextSibling(oldElm) ) if (isDef(vnode.parent)) { // component root element replaced. // update parent placeholder node element, recursively let ancestor = vnode.parent const patchable = isPatchable(vnode) while (ancestor) { for (let i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](ancestor) } ancestor.elm = vnode.elm if (patchable) { for (let i = 0; i < cbs.create.length; ++i) { cbs.create[i](emptyNode, ancestor) } const insert = ancestor.data.hook.insert if (insert.merged) { // start at index 1 to avoid re-invoking component mounted hook for (let i = 1; i < insert.fns.length; i++) { insert.fns[i]() } } } ancestor = ancestor.parent } } if (isDef(parentElm)) { // 移除老节点 removeVnodes(parentElm, [oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) } }
- 最后返回
vnode.elm。
原理
由上面的流程我们知道了当vnode和oldVnode都存在、oldVnode不是真实节点，并且vnode和oldVnode是同一节点时，才会调用patchVnode进行patch。
下面根据patchVnode源码分析patch的原理：
- 如果
oldVnode和vnode完全一致，则可认为没有变化，return； - 如果
oldVnode的isAsyncPlaceholder属性为true时，跳过检查异步组件，return； - 如果
oldVnode跟vnode都是静态节点，且具有相同的key，并且当vnode是克隆节点或是v-once指令控制的节点时，只需要把oldVnode.elm和oldVnode.child都复制到vnode上，也不用再有其他操作，return； - 否则，如果vnode不是文本节点时
4.1 如果
vnode和oldVnode都有子节点并且两者的子节点不一致时，就调用updateChildren更新子节点。updateChildren方法详细的解析可参考解析vue2.0的diff算法，图示说明，很形象。4.2 如果只有
vnode有子节点，则调用addVnodes创建子节点；4.3 如果只有
oldVnode有子节点，则调用removeVnodes把这些节点都删除；4.4 如果
oldVnode和vnode都没有子节点，但是oldVnode是文本节点时，则把vnode.elm的文本设置为空字符串；
- 如果
vnode是文本节点但是vnode.text != oldVnode.text时只需要更新vnode.elm的文本内容就可以。
原理流程图如下：
自此，Vue的patch原理就分析完了。
