前言
在 Vue 核心中除了響應式原理外，檢視渲染也是重中之重。我們都知道每次更新資料，都會走檢視渲染的邏輯，而這當中牽扯的邏輯也是十分繁瑣。
本文主要解析的是初始化檢視渲染流程，你將會了解到從掛載元件開始，Vue 是如何構建 VNode，又是如何將 VNode 轉為真實節點並掛載到頁面。
掛載元件($mount)
Vue 是一個建構函式，通過 new 關鍵字進行例項化。
// src/core/instance/index.js
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
在例項化時，會呼叫 _init 進行初始化。
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// ...
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
_init 內會呼叫 $mount 來掛載元件，而 $mount 方法實際呼叫的是 mountComponent。
// src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
// ...
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
// ...
} else {
updateComponent = () => {
vm._update(vm._render(), hydrating) // 渲染頁面函式
}
}
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, { // 渲染watcher
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
mountComponent 除了呼叫一些生命週期的鉤子函式外，最主要是 updateComponent，它就是負責渲染檢視的核心方法，其只有一行核心程式碼：
vm._update(vm._render(), hydrating)
vm._render 建立並返回 VNode，vm._update 接受 VNode 將其轉為真實節點。
updateComponent 會被傳入 渲染Watcher，每當資料變化觸發 Watcher 更新就會執行該函式，重新渲染檢視。updateComponent 在傳入 渲染Watcher 後會被執行一次進行初始化頁面渲染。
所以我們著重分析的是 vm._render 和 vm._update 兩個方法，這也是本文主要了解的原理——Vue 檢視渲染流程。
構建VNode(_render)
首先是 _render 方法，它用來構建元件的 VNode。
// src/core/instance/render.js
Vue.prototype._render = function () {
const { render, _parentVnode } = vm.$options
vnode = render.call(vm._renderProxy, vm.$createElement)
return vnode
}
_render 內部會執行 render 方法並返回構建好的 VNode。render 一般是模板編譯後生成的方法，也有可能是使用者自定義。
// src/core/instance/render.js
export function initRender (vm) {
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}
initRender 在初始化就會執行為例項上繫結兩個方法，分別是 vm._c 和 vm.$createElement。它們兩者都是呼叫 createElement 方法，它是建立 VNode 的核心方法，最後一個引數用於區別是否為使用者自定義。
vm._c 應用場景是在編譯生成的 render 函式中呼叫，vm.$createElement 則用於使用者自定義 render 函式的場景。就像上面 render 在呼叫時會傳入引數 vm.$createElement，我們在自定義 render 函式接收到的引數就是它。
createElement
// src/core/vdom/create-elemenet.js
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
createElement 方法實際上是對 _createElement 方法的封裝，它允許傳入的引數更加靈活。
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
_createElement 引數中會接收 children，它表示當前 VNode 的子節點，因為它是任意型別的，所以接下來需要將其規範為標準的 VNode 陣列；
// 這裡規範化 children
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
simpleNormalizeChildren 和 normalizeChildren 均用於規範化 children。由 normalizationType 判斷 render 函式是編譯生成的還是使用者自定義的。
// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
export function simpleNormalizeChildren (children: any) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
return Array.prototype.concat.apply([], children)
}
}
return children
}
// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}
simpleNormalizeChildren 方法呼叫場景是 render 函式當函式是編譯生成的。normalizeChildren 方法的呼叫場景主要是 render 函式是使用者手寫的。
經過對 children 的規範化，children 變成了一個型別為 VNode 的陣列。之後就是建立 VNode 的邏輯。
// src/core/vdom/patch.js
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
如果 tag 是 string 型別，則接著判斷如果是內建的一些節點，建立一個普通 VNode；如果是為已註冊的元件名，則通過 createComponent 建立一個元件型別的 VNode；否則建立一個未知的標籤的 VNode。
如果 tag 不是 string 型別，那就是 Component 型別, 則直接呼叫 createComponent 建立一個元件型別的 VNode 節點。
最後 _createElement 會返回一個 VNode，也就是呼叫 vm._render 時建立得到的VNode。之後 VNode 會傳遞給 vm._update 函式，用於生成真實dom。
生成真實dom(_update)
// 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 prevActiveInstance = activeInstance
activeInstance = 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)
}
activeInstance = prevActiveInstance
// 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 裡最核心的方法就是 vm.__patch__ 方法，不同平臺的 __patch__ 方法的定義會稍有不同，在 web 平臺中它是這樣定義的：
// src/platforms/web/runtime/index.js
import { patch } from './patch'
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
可以看到 __patch__ 實際呼叫的是 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 })
而 patch 方法是由 createPatchFunction 方法建立返回出來的函式。
// src/core/vdom/patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
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){}
}
這裡有兩個比較重要的物件 nodeOps 和 modules。nodeOps 是封裝的原生dom操作方法，在生成真實節點樹的過程中，dom相關操作都是呼叫 nodeOps 內的方法。
modules 是待執行的鉤子函式。在進入函式時，會將不同模組的鉤子函式分類放置到 cbs 中，其中包括自定義指令鉤子函式，ref 鉤子函式。在 patch 階段，會根據操作節點的行為取出對應型別進行呼叫。
patch
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
在首次渲染時，vm.$el 對應的是根節點 dom 物件，也就是我們熟知的 id 為 app 的 div。它作為 oldVNode 引數傳入 patch：
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([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
通過檢查屬性 nodeType（真實節點才有的屬性）， 判斷 oldVnode 是否為真實節點。
const isRealElement = isDef(oldVnode.nodeType)
if (isRealElement) {
// ...
oldVnode = emptyNodeAt(oldVnode)
}
很明顯第一次的 isRealElement 是為 true，因此會呼叫 emptyNodeAt 將其轉為 VNode：
function emptyNodeAt (elm) {
return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}
接著會呼叫 createElm 方法，它就是將 VNode 轉為真實dom 的核心方法：
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)) {
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)
}
}
一開始會呼叫 createComponent 嘗試建立元件型別的節點，如果成功會返回 true。在建立過程中也會呼叫 $mount 進行元件範圍內的掛載，所以走的還是 patch 這套流程。
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
如果沒有完成建立，代表該 VNode 對應的是真實節點，往下繼續建立真實節點的邏輯。
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
根據 tag 建立對應型別真實節點，賦值給 vnode.elm，它作為父節點容器，建立的子節點會被放到裡面。
然後呼叫 createChildren 建立子節點：
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)))
}
}
內部進行遍歷子節點陣列，再次呼叫 createElm 建立節點，而上面建立的 vnode.elm 作為父節點傳入。如此迴圈，直到沒有子節點，就會建立文字節點插入到 vnode.elm 中。
執行完成後出來，會呼叫 invokeCreateHooks，它負責執行 dom 操作時的 create 鉤子函式，同時將 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)
}
}
最後一步就是呼叫 insert 方法將節點插入到父節點：
function insert (parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (nodeOps.parentNode(ref) === parent) {
nodeOps.insertBefore(parent, elm, ref)
}
} else {
nodeOps.appendChild(parent, elm)
}
}
}
可以看到 Vue 是通過遞迴呼叫 createElm 來建立節點樹的。同時也說明最深的子節點會先呼叫 insert 插入節點。所以整個節點樹的插入順序是“先子後父”。插入節點方法就是原生dom的方法 insertBefore 和 appendChild。
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
}
createElm 流程走完後，構建完成的節點樹已經插入到頁面上了。其實 Vue 在初始化渲染頁面時，並不是把原來的根節點 app 給真正替換掉，而是在其後面插入一個新的節點，接著再把舊節點給移除掉。
所以在 createElm 之後會呼叫 removeVnodes 來移除舊節點，它裡面同樣是呼叫的原生dom方法 removeChild。
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
function invokeInsertHook (vnode, queue, initial) {
// delay insert hooks for component root nodes, invoke them after the
// element is really inserted
if (isTrue(initial) && isDef(vnode.parent)) {
vnode.parent.data.pendingInsert = queue
} else {
for (let i = 0; i < queue.length; ++i) {
queue[i].data.hook.insert(queue[i])
}
}
}
在 patch 的最後就是呼叫 invokeInsertHook 方法，觸發節點插入的鉤子函式。
至此整個頁面渲染的流程完畢~
總結
初始化呼叫 $mount 掛載元件。
_render 開始構建 VNode，核心方法為 createElement，一般會建立普通的 VNode ，遇到元件就建立元件型別的 VNode，否則就是未知標籤的 VNode，構建完成傳遞給 _update。
patch 階段根據 VNode 建立真實節點樹，核心方法為 createElm，首先遇到元件型別的 VNode，內部會執行 $mount，再走一遍相同的流程。普通節點型別則建立一個真實節點，如果它有子節點開始遞迴呼叫 createElm，使用 insert 插入子節點，直到沒有子節點就填充內容節點。最後遞迴完成後，同樣也是使用 insert 將整個節點樹插入到頁面中，再將舊的根節點移除。
往期相關文章：