Vue 的 _update 是實例上的一個私有方法，主要的作用就是把 VNode 渲染成真實的 DOM ,它在首次渲染和數據更新的時候被調用。在數據更新的時候會發生新 VNode 和 舊 VNode 對比，獲取差異更新視圖，我們常說的 diff 就是發生在此過程中。
_update
// src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
// 頁面的掛載點，真實的元素
const prevEl = vm.$el
// 老 VNode
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
// 新 VNode
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// 老 VNode 不存在，表示首次渲染，即初始化頁面時走這里
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// 響應式數據更新時，即更新頁面時走這里
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.
}
.patch
// src/platforms/web/runtime/index.js
// web 平台的 patch 函數，不同平台的定義不相同。
Vue.prototype.__patch__ = inBrowser ? patch : noop
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)
// 傳入平台特有的一些操作，然后返回一個 patch 函數
export const patch: Function = createPatchFunction({ nodeOps, modules })
patch 是 createPatchFunction 的返回值，這里傳入了一個對象，nodeOps 封裝了一系列相關平台 DOM的一些操作方法，modules 表示平台特有的一些操作，比如：attr、class、style、event 等，還有核心的 directive 和 ref，它們會向外暴露一些特有的方法。這里不做詳細介紹了，有興趣的老鐵可以去了解了解。
createPatchFunction
// src/core/vdom/patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
/**
* 傳入相關平台一些功能操作，最后返回 patch 函數
*/
export function createPatchFunction (backend) {
let i, j
const cbs = {}
const { modules, nodeOps } = backend
/**
* hooks = ['create', 'activate', 'update', 'remove', 'destroy']
* 遍歷這些鈎子，然后從 modules 的各個模塊中找到相應的方法，比如：directives 中的 create、update、destroy 方法
* cbs[hook] = [hook 方法]，比如: cbs.create = [fn1, fn2, ...]
*/
for (i = 0; i < hooks.length; ++i) {
// 比如 cbs.create = []
cbs[hooks[i]] = []
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
// 遍歷各個 modules，找出各個 module 中的 create 方法，然后添加到 cbs.create 數組中
cbs[hooks[i]].push(modules[j][hooks[i]])
}
}
}
/**
* ...這里定義了一大堆輔助函數，下面用到了撿重點看一下，不一一描述了。
*/
/**
* @param oldVnode 舊節點，可以不存在或是一個 DOM 對象
* @param vnode 新節點，_render 返回的節點
* @param hydrating 是否是服務端渲染
* @param removeOnly 是給 transition-group 用的
*/
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// 新節點不存在，舊節點存在，表示移除，銷毀舊節點。
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// 新節點存在，舊節點不存在，表示新增。
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 轉換成 VNode 對象.
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
}
}
從 createPatchFunction 返回的 patch 方法來看，主要分為這么幾種情況做處理：
- 新節點不存在，舊節點存在，表示移除。
- 新節點存在，舊節點不存在，表示新增。
- 新舊節點都存在，舊節點不是真實的元素且新舊節點是同一節點，表示 修改（更新） 。
- 新舊節點都存在，舊節點是真實的元素，一般是初始化渲染，舊節點的真實 DOM 也就是傳入進來的
vm.$el對應的元素，比如<div id="app">；這里還有一個情況就是當vnode.parent存在，又不是同一節點，表示 替換（更新），比如異步組件。
移除節點
invokeDestroyHook
// src/core/vdom/patch.js
/**
* 銷毀節點：
* 執行組件的 destroy 鈎子，即執行 $destroy 方法
* 執行組件各個模塊(style、class、directive 等）的 destroy 方法
* 如果 vnode 還存在子節點，則遞歸調用 invokeDestroyHook
*/
function invokeDestroyHook (vnode) {
let i, j
const data = vnode.data
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode)
for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
}
if (isDef(i = vnode.children)) {
for (j = 0; j < vnode.children.length; ++j) {
invokeDestroyHook(vnode.children[j])
}
}
}
初始化
在 createPatchFunction 中的 patch 方法內，由於傳入的 vm.$el，實際上是一個真實的 DOM，所以 isRealElement 為 true，（服務端渲染的先跳過）然后通過 emptyNodeAt 把 oldVnode 轉換成 VNode 對象。
emptyNodeAt
// src/core/vdom/patch.js
function emptyNodeAt (elm) {
return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}
createElm
然后調用 createElm 方法，這個是重點：
// src/core/vdom/patch.js
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、如果 vnode 是一個組件，則執行 init 鈎子，創建組件實例並掛載，
* 然后為組件執行各個模塊的 create 鈎子
* 如果組件被 keep-alive 包裹，則激活組件
* 2、如果是一個普通元素，則什么也不做
*/
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
// 獲取 Data 對象
const data = vnode.data
// 獲取子VNode
const children = vnode.children
// 判斷 tag
const tag = vnode.tag
if (isDef(tag)) {
// 如有有 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__) {
// 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)) {
// 注釋節點，創建注釋節點並插入父節點
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
// 文本節點，創建文本節點並插入父節點
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
createElm 的作用就是通過 VNode 創建真實的 DOM 插入到父節點中，它首先會執行 createComponent 方法，這個方法是用來創建子組件的，在初始化的時候會返回 false，后面組件新增的時候再看這個方法。然后會對判斷 vnode.tag，如果存在的話，會走入下面的邏輯：
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
createElementNS
// src/platforms/web/runtime/node-ops.js
// 創建帶命名空間的元素節點
export function createElementNS (namespace: string, tagName: string): Element {
return document.createElementNS(namespaceMap[namespace], tagName)
}
createElement
// src/platforms/web/runtime/node-ops.js
// 創建標簽名為 tagName 的元素節點
export function createElement (tagName: string, vnode: VNode): Element {
// 創建元素節點
const elm = document.createElement(tagName)
if (tagName !== 'select') {
return elm
}
// false or null will remove the attribute but undefined will not
// 如果是 select 元素，則為它設置 multiple 屬性
if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
elm.setAttribute('multiple', 'multiple')
}
return elm
}
接着會判斷 __WEEX__，這個是 Native 端的，跳過，接着執行 createChildren ：
createChildren
// src/core/vdom/patch.js
// 創建所有子節點，並將子節點插入父節點，形成一棵 DOM 樹
function createChildren (vnode, children, insertedVnodeQueue) {
if (Array.isArray(children)) {
// children 是數組，表示是一組節點
if (process.env.NODE_ENV !== 'production') {
// 檢測這組節點的 key 是否重復
checkDuplicateKeys(children)
}
// 遍歷這組節點，依次創建這些節點然后插入父節點，形成一棵 DOM 樹
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 實際就是遍歷子 VNode，遞歸調用 createElm，深度優先的遍歷算法。這里要注意的一點是在遍歷過程中會把 vnode.elm 作為父容器的 DOM 節點占位符傳入。
然后調用 invokeCreateHooks :
invokeCreateHooks
// src/core/vdom/patch.js
/**
* 執行所有的 create 的鈎子並把 vnode push 到 insertedVnodeQueue 中
* 調用各個模塊的 create 方法，比如創建屬性的、創建樣式的、指令的等等
*/
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 把 DOM 插入父節點中。
insert
// src/core/vdom/patch.js
// 向父節點插入節點
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)
}
}
}
// 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)
}
到這里 createElm 中判斷 vnode.tag，如果存在的的邏輯走完了，如果不存在的話，它可能是注釋或者純文本節點。
// src/core/vdom/patch.js
if (isDef(tag)) {
// ...
} 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)
}
// src/platforms/web/runtime/node-ops.js
// 創建注釋節點
export function createComment (text: string): Comment {
return document.createComment(text)
}
// 創建文本節點
export function createTextNode (text: string): Text {
return document.createTextNode(text)
}
到這里返回的 patch 中的 createElm （createChildren 會遞歸創建子節點或組件 ）就執行完了。接下來就是移除舊節點了。
// 移除老節點
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
在初始化 _update 執行完，調用 mounted 聲明周期鈎子，初始化執行完畢
// src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
// ...
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
// vm.$vnode 表示 Vue 實例的父虛擬 Node，所以它為 Null 則表示當前是根 Vue 的實例
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
新增
當新節點存在，舊節點不存在的時候，表示新增。在上面初始化說到 createChildren 方法會對子節點循環調用 createElm。當 createElm 遇到組件時的處理方式：
createElm
// src/core/vdom/patch.js
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
// ...
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
// ...
}
createComponent 的作用就是創建組件，這里對它的返回值做了個判斷，如果返回 true 的話就直接結束。但是這時返回的不是 true 。
createComponent
// src/ore/dom/atch.js
/**
* 如果 vnode 是一個組件，則執行 init 鈎子，創建組件實例，並掛載
* 然后為組件執行各個模塊的 create 方法
* @param {*} vnode 組件新的 vnode
* @param {*} insertedVnodeQueue 數組
* @param {*} parentElm oldVnode 的父節點
* @param {*} refElm oldVnode 的下一個兄弟節點
* @returns 如果 vnode 是一個組件並且組件創建成功，則返回 true，否則返回 undefined
*/
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
let i = vnode.data
if (isDef(i)) {
// 組件實例時候已存在且keep-alive包裹
const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
if (isDef(i = i.hook) && isDef(i = i.init)) {
// 如果 vnode 是一個組件，條件滿足，i 就是 init鈎子函數。
// 如果是被 keep-alive 包裹的組件，先執行 init 后會在執行 prepatch 鈎子。
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.
if (isDef(vnode.componentInstance)) {
// 如果 vnode 的實例存在
// 執行各個模塊的的 create 鈎子，創建屬性的、創建樣式的、指令等
initComponent(vnode, insertedVnodeQueue)
// 將組件的 DOM 節點插入到父節點內
insert(parentElm, vnode.elm, refElm)
if (isTrue(isReactivated)) {
// 組件被 keep-alive 包裹的情況，激活組件
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
}
return true
}
}
}
當 vnode 是一個組件 VNode，i 就是 init 鈎子函數。
init
// src/ore/dom/reate-component.js
// patch 期間在組件 VNode 上調用的內聯鈎子
// inline hooks to be invoked on component VNodes during patch
const componentVNodeHooks = {
// 初始化
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
if (
vnode.componentInstance &&
!vnode.componentInstance._isDestroyed &&
vnode.data.keepAlive
) {
// 被 keep-alive 包裹的組件
// kept-alive components, treat as a patch
const mountedNode: any = vnode // work around flow
// 更新 VNode
componentVNodeHooks.prepatch(mountedNode, mountedNode)
} else {
// 創建組件實例，即 new vnode.componentOptions.Ctor(options) => 得到 Vue 組件實例
const child = vnode.componentInstance = createComponentInstanceForVnode(
vnode,
activeInstance
)
// 調用 $mount 方法，進入掛載階段。
child.$mount(hydrating ? vnode.elm : undefined, hydrating)
}
},
// 更新 VNode
prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
// 新的 VNode 配置項
const options = vnode.componentOptions
// 舊的 VNode 組件實例
const child = vnode.componentInstance = oldVnode.componentInstance
// 用新的更新舊的
updateChildComponent(
child,
options.propsData, // updated props
options.listeners, // updated listeners
vnode, // new parent vnode
options.children // new children
)
}
// ...
}
在 init 中，如果是被 keep-alive 包裹，則會調用 componentVNodeHooks.prepatch 方法用新的 vnode 配置去更新舊的 vnode 配置。
如果沒有被 keep-alive 包裹，則通過 createComponentInstanceForVnode 創建 Vue 組件的實例。然后調用 $mount 掛載組件.
createComponentInstanceForVnode
// src/core/vdom/create-component.js
// new vnode.componentOptions.Ctor(options) => 得到 Vue 組件實例
export function createComponentInstanceForVnode (
// we know it's MountedComponentVNode but flow doesn't
vnode: any,
// activeInstance in lifecycle state
parent: any
): Component {
const options: InternalComponentOptions = {
// 表示它是一個組件
_isComponent: true,
_parentVnode: vnode,
// 表示當前激活的組件實例
parent
}
// 檢查內聯模版渲染函數
const inlineTemplate = vnode.data.inlineTemplate
if (isDef(inlineTemplate)) {
options.render = inlineTemplate.render
options.staticRenderFns = inlineTemplate.staticRenderFns
}
// new VueComponent(options) => Vue 實例
return new vnode.componentOptions.Ctor(options)
}
這里的 vnode.componentOptions.Ctor 對應的就是組件的構造函數。它實際繼承於 Vue 的一個構造器 Sub。
vnode.componentOptions.Ctor
// src/core/vdom/create-component.js
// context.$options._base = Vue
const baseCtor = context.$options._base
// 當 Ctor 為配置對象時，通過 Vue.extend 將其轉為構造函數
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
//src/coreglobal-api/extend.js
Vue.extend = function (extendOptions: Object): Function {
extendOptions = extendOptions || {}
const Super = this
const SuperId = Super.cid
/**
* 利用緩存，如果存在則直接返回緩存中的構造函數
*/
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
const name = extendOptions.name || Super.options.name
if (process.env.NODE_ENV !== 'production' && name) {
validateComponentName(name)
}
// 定義 Sub 構造函數，和 Vue 構造函數一樣
const Sub = function VueComponent (options) {
// 初始化
this._init(options)
}
// 通過原型繼承的方式繼承 Vue
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
// 選項合並，合並 Vue 的配置項到 自己的配置項上來
Sub.options = mergeOptions(
Super.options,
extendOptions
)
// 記錄自己的基類
Sub['super'] = Super
// 初始化 props，將 props 配置代理到 Sub.prototype._props 對象上
// 在組件內通過 this._props 方式可以訪問
if (Sub.options.props) {
initProps(Sub)
}
// 初始化 computed，將 computed 配置代理到 Sub.prototype 對象上
// 在組件內可以通過 this.computedKey 的方式訪問
if (Sub.options.computed) {
initComputed(Sub)
}
// 定義 extend/mixin/use 這三個靜態方法，允許在 Sub 基礎上再進一步構造子類
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// 定義 component、filter、directive 三個靜態方法
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
// 遞歸組件的原理，如果組件設置了 name 屬性，則將自己注冊到自己的 components 選項中
if (name) {
Sub.options.components[name] = Sub
}
// 在擴展時保留對基類選項的引用。
// 稍后在實例化時，我們可以檢查 Super 的選項是否具有更新
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// 緩存
cachedCtors[SuperId] = Sub
return Sub
}
}
在 new vnode.componentOptions.Ctor(options) 實例化其實就相當於 new Sub(options)。在 new Sub(options) 的過程中，調用 _init:
_init
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// ...
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
//...
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
這里因為 options._isComponent 為 true，調用 initInternalComponent 合並了一些配置，最后由於組件的初始化沒有 vm.$options.el ，所以這里的掛載會跳過。
回到 init 的過程中，在完成實例化的 _init 之后，接下來回執行 child.$mount(hydrating ? vnode.elm : undefined, hydrating) ，hydrating 表示服務端渲染，所以這里相當於執行 child.$mount(undefined, false) , $mount 中調用 mountComponent，然后 mountComponent 中又會調用 updateComponent :
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
接下來又會調用 vm._render() 生成組件的 VNode ，然后執行 vm._update 去渲染 VNode ，那么回到 _update，最后就是調用 __patch__，也就是 patch :
patch
// src/core/vdom/patch.js
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// ...
// 新節點存在，舊節點不存在
if (isUndef(oldVnode)) {
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
}
// ...
}
到這里又開始的 createElm 方法中：
createElm
// src/core/vdom/patch.js
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
// ...
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
// 獲取 Data 對象
const data = vnode.data
// 獲取子VNode
const children = vnode.children
// 判斷 tag
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)
}
// ...
} 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)
}
}
這時候傳入的 vnode 是組件的渲染 vnode ,也就是 render 之后的 vnode ，如果組件的根節點是普通元素，就創建元素節點，然后遍歷子節點遞歸調用 createElm，過程中如果遇到的 VNode 是一個組件，則重復這個過程。這樣就通過遞歸創建了完整的組件樹。
在完成組件的整個 patch 過程后，最后執行 insert(parentElm, vnode.elm, refElm) 完成組件的 DOM 插入。
更新
還記得在響應式原理嗎？但數據發生變化時，會觸發 watcher 的回調函數。使組件進行更新。
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
實際上還是調用了_update , patch 函數。patch 中通過 sameVnode 方法判斷新節點和舊節點是否是同一節點，而進入不同的處理方式。
新舊節點不同
// src/core/vdom/patch.js
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// ...
if (isUndef(oldVnode)) {
// ...
} else {
// ...
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// ...
} else {
if (isRealElement) {
// replacing existing element
// 舊節點的真實DOM
const oldElm = oldVnode.elm
// 舊節點的父元素
const parentElm = nodeOps.parentNode(oldElm)
// create new node
// 通過虛擬節點創建真實的 DOM 並插入到它的父節點中
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)
}
}
}
}
}
新節點和舊節點不相同的更新只需要，用新的把舊的替換掉，過程大致就是：
- 已舊節點為參考點，使用
createElm創建新節點，並插入 DOM 中。 - 更新父的占位符節點。
- 移除舊節點，當組件沒有被
keep-alive包裹，移除過程中，就會執行beforeDestroy和destroyed鈎子函數
新舊節點相同
重頭戲來了，當新舊節點相同時，會調用 patchVnode 方法，我們常說的diff算法也就發生在這個過程中。
patchVnode
// src/core/vdom/patch.js
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
// 新舊節點相同，直接返回
if (oldVnode === vnode) {
return
}
if (isDef(vnode.elm) && isDef(ownerArray)) {
// clone reused vnode
vnode = ownerArray[index] = cloneVNode(vnode)
}
const elm = vnode.elm = oldVnode.elm
// 異步占位符節點
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}
// 跳過靜態節點
// reuse element for static trees.
// note we only do this if the vnode is cloned -
// if the new node is not cloned it means the render functions have been
// reset by the hot-reload-api and we need to do a proper re-render.
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
// 新舊節點都是靜態的而且兩個節點的 key 一樣，並且新節點被 clone 了 或者 新節點有 v-once指令，則復用這部分節點
vnode.componentInstance = oldVnode.componentInstance
return
}
// 執行組件的 prepatch 鈎子
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
// 舊節點的子節點
const oldCh = oldVnode.children
// 新節點的子節點
const ch = vnode.children
// 全量更新新節點的屬性，Vue 3.0 在這里做了很多的優化。
if (isDef(data) && isPatchable(vnode)) {
// 執行組件的 update 鈎子
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
// patch 過程。
if (isUndef(vnode.text)) {
// 新節點不是文本節點。
if (isDef(oldCh) && isDef(ch)) {
// 新舊節點都有子節點，遞歸執行 diff 操作。
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
// 新節點有子節點，舊節點沒有子節點，先清空舊節點的文本內容，然后新增子節點。
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(ch)
}
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
// 新節點沒有子節點，舊節點有子節點，移除所有子節點。
removeVnodes(oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
// 新舊節點都沒有子節點，若有文本內容則置空。
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
// 新節點是文本節點，更新文本
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
// 執行組件的 postpatch 鈎子
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
在對比新舊 VNode 的時候主要包括三種類型操作：屬性更新、文本更新、子節點更新。在 patchVnode 的流程中主要把其分為四個步驟：
- 執行
prepatch鈎子函數。 - 執行
update鈎子函數。 - 完成 patch 過程。
- 執行
postpatch鈎子函數。
這里重點關注 patch 過程，先是對 vnode 判斷，如果 vnode 是文本節點且文本相同，則更新文本。如果不是文本節點，則做了這么幾種情況的處理：
- 新節點舊節點都有子節點且不相同，通過
updateChildren來更新子節點。 - 新節點有子節點，舊節點沒有子節點，如果有文本先清空文本，然后通過
addVnodes新增子節點。 - 新節點沒有子節點，舊節點有子節點，通過
removeVnodes移除所有子節點。 - 新節點是文本節點，且新舊文本不同，則更新文本。
在這些更新情況中，updateChildren 最為復雜，我們常說的 diff 雙端比較也就發生在這里，重點關注一下。
updateChildren
// src/core/vdom/patch.js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
// 舊節點的開始索引
let oldStartIdx = 0
// 新節點的開始索引
let newStartIdx = 0
// 舊節點的結束索引
let oldEndIdx = oldCh.length - 1
// 第一個舊節點
let oldStartVnode = oldCh[0]
// 最后一個舊節點
let oldEndVnode = oldCh[oldEndIdx]
// 新節點的結束索引
let newEndIdx = newCh.length - 1
// 第一個新節點
let newStartVnode = newCh[0]
// 最后一個新節點
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly是一個特殊的標志，僅由 <transition-group> 使用，以確保被移除的元素在離開轉換期間保持在正確的相對位置
const canMove = !removeOnly
if (process.env.NODE_ENV !== 'production') {
// 檢查新節點的 key 是否重復
checkDuplicateKeys(newCh)
}
// 遍歷新舊兩組節點，只要有一組遍歷完（開始索引超過結束索引）則跳出循環
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
// 如果節點被移動，在當前索引上可能不存在，檢測這種情況，如果節點不存在則調整索引
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// 舊開始節點和新開始節點是同一個節點，執行 patch
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// patch 結束后舊開始和新開始的索引分別加 1
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// 舊結束和新結束是同一個節點，執行 patch
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
// patch 結束后舊結束和新結束的索引分別減 1
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// 舊開始和新結束是同一個節點，執行 patch
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
// 處理被 transtion-group 包裹的組件時使用
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
// patch 結束后舊開始索引加 1，新結束索引減 1
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// 舊結束和新開始是同一個節點，執行 patch
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// patch 結束后，舊結束的索引減 1，新開始的索引加 1
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
// 如果上面的四種假設都不成立，則通過遍歷找到新開始節點在舊節點中的位置索引
// 找到舊節點中每個節點 key 和 索引之間的關系映射 => oldKeyToIdx = { key1: idx1, ... }
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 在映射中找到新開始節點在舊節點中的位置索引
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element
// 在舊節點中沒找到新開始節點，則說明是新創建的元素，執行創建
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
// 在舊節點中找到新開始節點了
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
// 如果這兩個節點是同一個，則執行 patch
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// patch 結束后將該舊節點置為 undefined
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
// 最后這種情況是，找到節點了，但是發現兩個節點不是同一個節點，則視為新元素，執行創建
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
// 舊節點向后移動一個
newStartVnode = newCh[++newStartIdx]
}
}
// 走到這里，說明舊節點或者新節點被遍歷完了
if (oldStartIdx > oldEndIdx) {
// 說明舊節點被遍歷完了，新節點有剩余，則說明這部分剩余的節點是新增的節點，然后添加這些節點
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
// 說明新節點被遍歷完了，舊節點有剩余，說明這部分的節點被刪掉了，則移除這些節點
removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}
}
updateChildren 主要作用是用一種高效的方式對比新舊 VNode 的 children 來獲取差異，更新視圖。 sameVnode 方法是對比兩個節點是否相同。
循環之前，在新舊兩組子節點的開始和結束位置都會創建變量索引，在循環過程中，這幾個變量索引都會向中間靠攏。當 oldStartIdx > oldEndIdx 或者 newStartIdx > newEndIdx 時結束循環。
首先進行 oldStartVnode、oldEndVnode 與 newStartVnode、newEndVnode 兩兩交叉比較，做了四種假設。
假設舊開始和新開始或者舊結束和新結束相同，直接將該 VNode 節點進行 patchVnode 即可，就避免了一次循環，以提高執行效率，如下圖：
如果舊開始和新結束相同，調用 patchVnode ，將真實DOM節點移動到 oldEndVnode 的后面。
如果舊結束和新開始相同，調用 patchVnode ，將真實DOM節點移動到 oldStartVnode 的前面。
如果上面四種假設均不成立，通過 key，在舊節點中找對應的新開始，若存在執行 patchVnode ，同時移動到 oldStartVnode 的前面。
若是找不到一致的 key , 或者 key 相同但不是同一節點，這時候說明是新節點，調用 createElm 執行創建。
當循環結束時 oldStartIdx > oldEndIdx ，這時候舊節點已遍歷完，新節點還沒有，說明新節點比舊節點多，這時候需要將剩下的節點對應的 DOM 插入到真實的 DOM 中，調用 addVnodes 方法。
當循環結束時 newStartIdx > newEndIdx ，這時候新節點已遍歷完，舊節點還沒有，說明舊節點比新節點多，這時候需要將多余的節點刪除。
相關鏈接
如果覺得還湊合的話，給個贊吧！！！也可以來我的 個人博客 逛逛!