前言
各位道友大家好，我是LSF，在上一篇博文 中，分析了Vue初始化的整體流程，最後到了 update 動態建立 DOM 階段。接下來這篇博文，會對這個流程進行分析，重點需要掌握 createElm 函式的執行邏輯。
一、_update 如何判斷是初始化還是更新操作？
_update 是在Vue例項化之前，通過prototype混入的一個例項方法。主要目的是將vnode轉化成真實DOM，它定義在 core/instance/lifecycle.js 檔案中。
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this // vm -> this
const prevEl = vm.$el
// 儲存上一個vnode。
const prevVnode = vm._vnode
// 設定 activeInstance 當前活動的vm，返回方法。
const restoreActiveInstance = setActiveInstance(vm)
vm._vnode = vnode // 賦值 _vnode 屬性為新傳入的 vnode。
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// initial render 初始化渲染，如果有子元件，會遞迴初始化
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates 更新
vm.$el = vm.__patch__(prevVnode, vnode)
}
// activeInstance 恢復到當前的vm
restoreActiveInstance()
// update __vue__ reference
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}
程式碼中可以看到，通過 prevVnode 是否為 null 來判斷的是否是初始化 patch。由於是初始化操作，開始的時候 vm._vnode 沒有被賦值成 vnode，從而 vm._vnode 為 null。所以程式碼的執行邏輯會走到初始化 patch。
二、patch
2.1 patch 定義
web端的 Vue.prototype.__patch__ 方法，它定義的入口在 src/platforms/web/runtime/index.js 檔案中。
import { patch } from './patch'
...
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
// install platform patch function
// 安裝web端的 patch 方法。
Vue.prototype.__patch__ = inBrowser ? patch : noop
...
如果是瀏覽器環境下，被賦值為 patch 方法，該方法定義在 src/platforms/web/runtime/patch.js中。如果是非瀏覽器環境，patch 被賦值成一個空函式。
/* @flow */
import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'
// the directive module should be applied last, after all
// built-in modules have been applied.
const modules = platformModules.concat(baseModules)
// 呼叫 createPatchFunction 函式，返回 patch。
export const patch: Function = createPatchFunction({ nodeOps, modules })
通過程式碼可以看到，最終 vue 是呼叫了 createPatchFunction 函式，它定義在 src/core/vdom/patch.js 中。createPatchFunction 函式內部定義瞭如 emptyNodeAt、removeNode、createElement、createChildren 等一系列的輔助函式，通過這些輔助函式，完成了對 patch 函式的程式碼邏輯的封裝。
2.2 初始化的 patch
建立Vue例項，或者元件例項的，patch 都會被執行。
如果是建立vue例項執行 patch
isRealElement：判斷是否是真實的DOM節點。
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)：負責DOM的更新。
oldVnode = emptyNodeAt(oldVnode)：對容器DOM進行vnode的轉化。
createElm()：建立新節點，初始化建立需要重點關注的函式。
如果是建立元件例項執行的 patch
isInitialPatch：使用者判斷子元件否初次執行 patch，進行建立。
insertedVnodeQueue：新建立子元件節點，元件 vnode 會被push到這個佇列中。
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)。
具體程式碼註釋如下
export function createPatchFunction (backend) {
...
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// 如果新的 vnode 為空，呼叫 destory 鉤子，銷燬oldVnode
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
// 使用者判斷子元件否初次執行 patch，進行建立。
let isInitialPatch = false
// 新建立子元件節點，元件 vnode 會被push到這個佇列中
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
// 空掛載(可能作為元件)，建立新的根元素
isInitialPatch = true
// 建立元件節點的子元素
createElm(vnode, insertedVnodeQueue)
} else {
// 1.作為判斷是否是真實的DOM節點條件
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
// 更新操作
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
...
// either not server-rendered, or hydration failed.
// create an empty node and replace it
// 2. 傳入的容器DOM（如 el: "#app"），會在這裡被轉化成 vnode。
oldVnode = emptyNodeAt(oldVnode)
}
// replacing existing element
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
// 3. 建立新節點
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
// update parent placeholder node element, recursively
// 遞迴的更新父佔位節點元素。
if (isDef(vnode.parent)) {...
}
// destroy old node
// 銷燬舊節點
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
// 呼叫 insertedVnodeQueue 佇列中所有子元件的 insert 鉤子。
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
三、createElm 動態建立DOM
createElm 函式是動態建立 DOM 的核心，作用是通過 vnode 建立真實的 DOM，並插入到它的父 DOM 節點中。它定義在 src/core/vdom/patch.js
的 createPatchFunction 方法中。createElm 內部建立 DOM 的主要判斷邏輯，可以概括為下面幾種情況。
1、如果建立元件節點
如果碰到子元件標籤，走建立元件節點邏輯。
建立完成，插入到父親元素中。
2、如果建立標籤元素節點
如果 vnode.tag 不為空，先建立標籤元素, 賦值 vnode.elm 進行佔位。
呼叫
createChildren建立子節點，最終這些子節點會 append 到 vnode.elm 標籤元素中。將 vnode.elm 標籤元素插入到父親元素中。
3、如果建立註釋節點
如果 vnode.isComment 不為空，建立註釋節點，賦值 vnode.elm。
將註釋節點插入到父親元素中。
4、如果建立文字節點
上面三種情況都不是，則建立文字節點，賦值 vnode.elm。
將文字節點插入到父親元素中。
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
if (isDef(vnode.elm) && isDef(ownerArray)) {
// This vnode was used in a previous render!
// now it's used as a new node, overwriting its elm would cause
// potential patch errors down the road when it's used as an insertion
// reference node. Instead, we clone the node on-demand before creating
// associated DOM element for it.
vnode = ownerArray[index] = cloneVNode(vnode)
}
vnode.isRootInsert = !nested // for transition enter check
// 1、如果碰到子元件標籤，走建立元件節點邏輯，插入父親節點。
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
// 2、如果是標籤標記，先建立標籤元素進行佔位。
// 呼叫 createChildren 建立子節點（遞迴呼叫createElm）。
// 將標籤元素，插入父親元素。
if (isDef(tag)) {
if (process.env.NODE_ENV !== 'production') {
if (data && data.pre) {
creatingElmInVPre++
}
if (isUnknownElement(vnode, creatingElmInVPre)) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
)
}
}
// 通過上面的tag，建立標籤元素，賦值給 vnode.elm 進行佔位
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
/* istanbul ignore if */
if (__WEEX__) {
// in Weex, the default insertion order is parent-first.
// List items can be optimized to use children-first insertion
// with append="tree".
const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
if (!appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
createChildren(vnode, children, insertedVnodeQueue)
if (appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
} else {
// 建立子節點
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// 將建立的標籤元素節點，插入父親元素
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
// 3、建立註釋節點，插入到父親元素
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
// 4、建立文字節點，插入到父親元素
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
下面對動態建立的幾種情況分別進行說明。
3.1 建立元件節點
建立元件節點和 vue 的元件系統息息相關，這裡先不具體展開，之後的博文中單獨分析 vue 元件系統。只需要記住 vue 模板裡的子元件初始化建立，是在這一步進行即可。
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
...
// 建立元件節點
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
...
}
createComponent 這個方法也定義在 src/core/vdom/patch.js 的 createPatchFunction 的方法中，這裡先簡單的介紹一下這個方法的內部邏輯。
通過 vnode.data 中是否包含元件相關的 hook，來判斷當前 vnode 是否是子元件 vnode（元件的 vnode，會包含 init 等鉤子方法）。
呼叫 init，執行子元件的初始化流程，建立子元件例項，進行子元件掛載。
將生成的子元件 DOM 賦值給 vnode.elm。
通過 vnode.elm 將建立的子元件節點，插入到父親元素中。
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
let i = vnode.data
if (isDef(i)) {
const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
// 呼叫元件 init 鉤子後，會執行子元件的**初始化流程**
// 建立子元件例項，進行子元件掛載。
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
// after calling the init hook, if the vnode is a child component
// it should've created a child instance and mounted it. the child
// component also has set the placeholder vnode's elm.
// in that case we can just return the element and be done.
// 如果是元件例項，將建立 vnode.elm 佔位符
// 將生成的元件節點，插入到父親元素中
if (isDef(vnode.componentInstance)) {
initComponent(vnode, insertedVnodeQueue)
insert(parentElm, vnode.elm, refElm)
if (isTrue(isReactivated)) {
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
}
return true
}
}
}
如果是建立元件節點，並且成功，createComponent 函式返回 true。createElm 函式執行到 return。
如果是其他型別的節點，createComponent 函式返回 undefined，createElm 函式，會向下執行建立其他型別節點（標籤元素、註釋、文字）的程式碼邏輯。
綜上所述，createElm 函式執行，只要碰到元件標籤，會遞迴的去初始化建立子元件，簡圖如下所示（綠色線路部分）。
再呼叫 insert(parentElm, vnode.elm, refElm)，將生成的元件節點插入到父親元素中（遵從先子後父）。
3.2 建立標籤元素節點
createElm 判斷如果 vnode 不是元件的 vnode，它會判斷是否是標籤元素，從而進行建立標籤元素節點的程式碼邏輯， 主要邏輯分析如下。
vnode.tag 標籤屬性存在，通過 tag 建立對應的標籤元素，賦值給 vnode.elm 進行佔位。
呼叫 createChildren 建立子節點（遍歷子vnode，遞迴呼叫 createElm 函式）。
將建立的標籤元素節點，插入父親元素。
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
...
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
// 2、如果是標籤標記，先建立標籤元素進行佔位。
// 呼叫 createChildren 建立子節點（遍歷子vnode，遞迴呼叫 createElm 函式）。
// 將標籤元素，插入父親元素。
// 如果標籤屬性不為空
if (isDef(tag)) {
if (process.env.NODE_ENV !== 'production') {
if (data && data.pre) {
creatingElmInVPre++
}
// 不合法的標籤進行提示
if (isUnknownElement(vnode, creatingElmInVPre)) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
)
}
}
// 通過上面的tag，建立標籤元素，賦值給 vnode.elm 進行佔位
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
/* istanbul ignore if */
if (__WEEX__) {
...
} else {
// 建立子節點
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
// vnode.data 不為空，呼叫所有create的鉤子。
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// 將建立的標籤元素節點，插入父親元素
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
...
}
createChildren 函式主要邏輯如下
如果 vnode.children 是子 vnode 陣列，遍歷 vnode.children 中的每個子 vnode，遞迴的呼叫了 createElm 函式，建立對應的子節點，並插入到父親元素中（此時的父親元素 parentElm 為 vnode.elm)。
如果 vnode.text 為空字串。就建立一個空文字節點，插入到 vnode.elm 元素中。
function createChildren (vnode, children, insertedVnodeQueue) {
if (Array.isArray(children)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(children)
}
// 遍歷子vnode陣列，遞迴呼叫 createElm
for (let i = 0; i < children.length; ++i) {
createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
}
} else if (isPrimitive(vnode.text)) {
// 建立空文字節點，appendChildren 到 vnode.elm 中
nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
}
}
上面已經建立完成子標籤節點，invokeCreateHooks 呼叫執行所有子元件相關的 create 鉤子。這個方法createElm、
initComponent 中都會被呼叫。如果在 initComponent 中呼叫，說明建立的子節點中有元件節點，還會將元件 vnode 新增到 insertedVnodeQueue 佇列中。
// createElm 中
if (isDef(data)) {
// vnode.data 不為空，呼叫所有create的鉤子。
invokeCreateHooks(vnode, insertedVnodeQueue)
}
function initComponent (vnode, insertedVnodeQueue) {
if (isDef(vnode.data.pendingInsert)) {
insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
vnode.data.pendingInsert = null
}
vnode.elm = vnode.componentInstance.$el
if (isPatchable(vnode)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
setScope(vnode)
} else {
// empty component root.
// skip all element-related modules except for ref (#3455)
registerRef(vnode)
// make sure to invoke the insert hook
insertedVnodeQueue.push(vnode)
}
}
function invokeCreateHooks (vnode, insertedVnodeQueue) {
// 所有元件相關的create鉤子都呼叫
// initComponent呼叫的話，還會將各個子元件的 vnode 新增到 insertedVnodeQueue 佇列中。
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, vnode)
}
i = vnode.data.hook // Reuse variable
if (isDef(i)) {
if (isDef(i.create)) i.create(emptyNode, vnode)
if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
}
}
綜上所述，createElm 建立標籤節點內部通過 createChildren 實現了對 createElm 的遍歷遞迴呼叫，實現了深度優先遍歷，簡圖如下所示（藍色線路部分）。
再呼叫 insert(parentElm, vnode.elm, refElm)，將生成的元素節點插入到父親元素中（遵從先子後父）。
3.3 建立註釋節點
如果不是建立元件節點和元素節點，vue 就通過 vnode.isComment 屬性判斷，是否建立註釋節點。建立完成之後，插入到父親元素中（遵從先子後父）
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
3.3 建立文字節點
如果不是建立元件節點、元素節點、註釋節點，vue 就建立文字節點，建立完成之後，插入到父親元素中(遵從先子後父)。
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
四、銷燬舊節點
通過前面章節的分析，知道了 patch 函式，主要通過 createElm 動態的建立好了 DOM，並且已經成功新增到了舊DOM的後面，所以下一步操作，就只需要將舊 DOM 進行刪除即可。
// destroy old node
// 銷燬舊的節點（如 el: "app" 這個DOM）
// 建立完成的整個dom會append到 el: "app", 的父親元素（如 parentElm 為 body）上
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
五、總結
vue 通過呼叫 patch 函式進行初始化 DOM 的建立。
patch 的關鍵是理解內部 createElm 這個函式，它會判斷元件、元素、註釋、文字這些型別的節點，來建立相應的DOM，完成之後新增到父元素。
vue 的元件系統實現，關鍵在於動態建立元件節點的邏輯當中。
新 DOM 建立新增過程是從子到父的，而元件的例項化是從父到子的。