update
Vue 的_update 是實(shí)例的一個(gè)私有方法，它被調(diào)用的時(shí)機(jī)有 2 個(gè)，一個(gè)是首次渲染，一個(gè)是數(shù)據(jù)更新的時(shí)候；由于我們這一章節(jié)只分析首次渲染部分，數(shù)據(jù)更新部分會(huì)在之后分析響應(yīng)式原理的時(shí)候涉及。_update 方法的作用是把 VNode 渲染成真實(shí)的 DOM，它的定義在 src/core/instance/lifecycle.js 中：
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
vm._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)
}
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.
}
_update 的核心就是調(diào)用vm.__patch__方法，這個(gè)方法實(shí)際上在不同的平臺(tái)，比如 web 和 weex 上的定義是不一樣的，因此在 web 平臺(tái)中它的定義在 src/platforms/web/runtime/index.js 中：
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
可以看到，甚至在 web 平臺(tái)上，是否是服務(wù)端渲染也會(huì)對(duì)這個(gè)方法產(chǎn)生影響。因?yàn)樵诜?wù)端渲染中，沒有真實(shí)的瀏覽器 DOM 環(huán)境，所以不需要把 VNode 最終轉(zhuǎn)換成 DOM，因此是一個(gè)空函數(shù)，而在瀏覽器端渲染中，它指向了 patch 方法，它的定義在 src/platforms/web/runtime/patch.js中：
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)
export const patch: Function = createPatchFunction({ nodeOps, modules })
該方法的定義是調(diào)用 createPatchFunction 方法的返回值，這里傳入了一個(gè)對(duì)象，包含 nodeOps 參數(shù)和 modules 參數(shù)。其中，nodeOps 封裝了一系列 DOM 操作的方法，modules 定義了一些模塊的鉤子函數(shù)的實(shí)現(xiàn)，這里先略過，來看一下 createPatchFunction 的實(shí)現(xiàn)，它定義在 src/core/vdom/patch.js 中：
export function createPatchFunction (backend) {
let i, j
const cbs = {}
const { modules, nodeOps } = backend
for (i = 0; i < hooks.length; ++i) {
cbs[hooks[i]] = []
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
cbs[hooks[i]].push(modules[j][hooks[i]])
}
}
}
return function patch (oldVnode, vnode, hydrating, removeOnly) {
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
// 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)) {
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
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)
}
// replacing existing element
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
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)) {
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)
}
// #6513
// invoke insert hooks that may have been merged by create hooks.
// e.g. for directives that uses the "inserted" hook.
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]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// destroy old node
if (isDef(parentElm)) {
removeVnodes(parentElm, [oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
}
createPatchFunction 內(nèi)部定義了一系列的輔助方法，最終返回了一個(gè) patch 方法，這個(gè)方法就賦值給了 vm._update 函數(shù)里調(diào)用的 vm.__patch__。
在介紹 patch 的方法實(shí)現(xiàn)之前，我們可以思考一下為何 Vue.js 源碼繞了這么一大圈，把相關(guān)代碼分散到各個(gè)目錄。因?yàn)榍懊娼榻B過，patch 是平臺(tái)相關(guān)的，在 Web 和 Weex 環(huán)境，它們把虛擬 DOM 映射到 “平臺(tái) DOM” 的方法是不同的，并且對(duì) “DOM” 包括的屬性模塊創(chuàng)建和更新也不盡相同。因此每個(gè)平臺(tái)都有各自的 nodeOps 和 modules，它們的代碼需要托管在 src/platforms 這個(gè)大目錄下。
而不同平臺(tái)的 patch 的主要邏輯部分是相同的，所以這部分公共的部分托管在 core 這個(gè)大目錄下。差異化部分只需要通過參數(shù)來區(qū)別，這里用到了一個(gè)函數(shù)柯里化的技巧，通過 createPatchFunction 把差異化參數(shù)提前固化，這樣不用每次調(diào)用 patch 的時(shí)候都傳遞 nodeOps 和 modules 了，這種編程技巧也非常值得學(xué)習(xí)。
在這里，nodeOps 表示對(duì) “平臺(tái) DOM” 的一些操作方法，modules 表示平臺(tái)的一些模塊，它們會(huì)在整個(gè) patch 過程的不同階段執(zhí)行相應(yīng)的鉤子函數(shù)。這些代碼的具體實(shí)現(xiàn)會(huì)在之后的章節(jié)介紹。
回到 patch 方法本身，它接收 4個(gè)參數(shù):
1.oldVnode 表示舊的 VNode 節(jié)點(diǎn)，它也可以不存在或者是一個(gè) DOM 對(duì)象；
2.vnode 表示執(zhí)行 _render 后返回的 VNode 的節(jié)點(diǎn)；
3.hydrating 表示是否是服務(wù)端渲染；
4.removeOnly 是給 transition-group 用的，之后會(huì)介紹。
patch 的邏輯看上去相對(duì)復(fù)雜，因?yàn)樗兄浅６嗟姆种н壿?，為了方便理解，我們并不?huì)在這里介紹所有的邏輯，僅會(huì)針對(duì)我們之前的例子分析它的執(zhí)行邏輯。之后我們對(duì)其它場(chǎng)景做源碼分析的時(shí)候會(huì)再次回顧 patch 方法。
var app = new Vue({
el: '#app',
render: function (createElement) {
return createElement('div', {
attrs: {
id: 'app'
},
}, this.message)
},
data: {
message: 'Hello Vue!'
}
})
然后我們?cè)?vm._update 的方法里是這么調(diào)用 patch 方法的：
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
結(jié)合我們的例子，我們的場(chǎng)景是首次渲染，所以在執(zhí)行 patch 函數(shù)的時(shí)候，傳入的 vm.$el 對(duì)應(yīng)的是例子中 id 為 app 的 DOM 對(duì)象，這個(gè)也就是我們?cè)?index.html 模板中寫的 <div id="app">， vm.$el的賦值是在之前 mountComponent 函數(shù)做的，vnode 對(duì)應(yīng)的是調(diào)用 render 函數(shù)的返回值，hydrating 在非服務(wù)端渲染情況下為 false，removeOnly 為 false。
確定了這些入?yún)⒑?，我們回?patch 函數(shù)的執(zhí)行過程，看幾個(gè)關(guān)鍵步驟。
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
} else {
if (isRealElement) {
// 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)) {
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
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)
}
// replacing existing element
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
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)
)
}
由于我們傳入的 oldVnode 實(shí)際上是一個(gè) DOM container，所以isRealElement 為 true，接下來又通過emptyNodeAt 方法把oldVnode 轉(zhuǎn)換成VNode 對(duì)象，然后再調(diào)用createElm 方法，這個(gè)方法在這里非常重要，來看一下它的實(shí)現(xiàn)：
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
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
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
)
}
}
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)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
createElm 的作用是通過虛擬節(jié)點(diǎn)創(chuàng)建真實(shí)的 DOM 并插入到它的父節(jié)點(diǎn)中。 我們來看一下它的一些關(guān)鍵邏輯，createComponent 方法目的是嘗試創(chuàng)建子組件，先略過，在當(dāng)前這個(gè) case 下它的返回值為 false；接下來判斷 vnode 是否包含 tag，如果包含，先簡(jiǎn)單對(duì) tag 的合法性在非生產(chǎn)環(huán)境下做校驗(yàn)，看是否是一個(gè)合法標(biāo)簽；然后再去調(diào)用平臺(tái) DOM 的操作去創(chuàng)建一個(gè)占位符元素。
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
接下來調(diào)用createChildren 方法去創(chuàng)建子元素：
createChildren(vnode, children, insertedVnodeQueue)
function createChildren (vnode, children, insertedVnodeQueue) {
if (Array.isArray(children)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(children)
}
for (let i = 0; i < children.length; ++i) {
createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
}
} else if (isPrimitive(vnode.text)) {
nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
}
}
createChildren 的邏輯很簡(jiǎn)單，實(shí)際上是遍歷子虛擬節(jié)點(diǎn)，遞歸調(diào)用 createElm，這是一種常用的深度優(yōu)先的遍歷算法，這里要注意的一點(diǎn)是在遍歷過程中會(huì)把 vnode.elm 作為父容器的 DOM 節(jié)點(diǎn)占位符傳入。
接著再調(diào)用invokeCreateHooks 方法執(zhí)行所有的 create 的鉤子并把 vnode push 到 insertedVnodeQueue 中。
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
function invokeCreateHooks (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)
}
}
最后調(diào)用 insert 方法把 DOM 插入到父節(jié)點(diǎn)中，因?yàn)槭沁f歸調(diào)用，子元素會(huì)優(yōu)先調(diào)用 insert，所以整個(gè) vnode 樹節(jié)點(diǎn)的插入順序是先子后父。來看一下 insert 方法，它的定義在 src/core/vdom/patch.js 上。
insert(parentElm, vnode.elm, refElm)
function insert (parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (ref.parentNode === parent) {
nodeOps.insertBefore(parent, elm, ref)
}
} else {
nodeOps.appendChild(parent, elm)
}
}
}
insert 邏輯很簡(jiǎn)單，調(diào)用一些 nodeOps 把子節(jié)點(diǎn)插入到父節(jié)點(diǎn)中，這些輔助方法定義在 src/platforms/web/runtime/node-ops.js 中：
export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
parentNode.insertBefore(newNode, referenceNode)
}
export function appendChild (node: Node, child: Node) {
node.appendChild(child)
}
其實(shí)就是調(diào)用原生 DOM 的 API 進(jìn)行 DOM 操作，看到這里，很多同學(xué)恍然大悟，原來 Vue 是這樣動(dòng)態(tài)創(chuàng)建的 DOM。
在 createElm 過程中，如果 vnode 節(jié)點(diǎn)不包含 tag，則它有可能是一個(gè)注釋或者純文本節(jié)點(diǎn)，可以直接插入到父元素中。在我們這個(gè)例子中，最內(nèi)層就是一個(gè)文本 vnode，它的 text 值取的就是之前的 this.message 的值 Hello Vue!。
再回到patch 方法，首次渲染我們調(diào)用了createElm 方法，這里傳入的parentElm 是 oldVnode.elm 的父元素，在我們的例子是 id 為 #app div 的父元素，也就是 Body；實(shí)際上整個(gè)過程就是遞歸創(chuàng)建了一個(gè)完整的 DOM 樹并插入到 Body 上。
最后，我們根據(jù)之前遞歸createElm 生成的vnode 插入順序隊(duì)列，執(zhí)行相關(guān)的insert 鉤子函數(shù)，這部分內(nèi)容我們之后會(huì)詳細(xì)介紹。
總結(jié)
那么至此我們從主線上把模板和數(shù)據(jù)如何渲染成最終的 DOM 的過程分析完畢了，我們可以通過下圖更直觀地看到從初始化 Vue 到最終渲染的整個(gè)過程。
我們這里只是分析了最簡(jiǎn)單和最基礎(chǔ)的場(chǎng)景，在實(shí)際項(xiàng)目中，我們是把頁面拆成很多組件的，Vue 另一個(gè)核心思想就是組件化。那么下一章我們就來分析 Vue 的組件化過程。
