生命周期
前言
之前說的資料和模板渲染，組件的創建，配置的合并，其實在平時業務上很少去關注，因為即使不了解也不影響使用，而生命周期則和我們的業務代碼有著緊密的聯系了，玩過Vue的基本都得了解它的流程，這章就打算來理一理老猿常談的話題 - 生命周期，
不怎么了解生命周期可以先去官網看看生命周期流程圖，
這里只是大概講述原始碼中是如何執行生命周期的鉤子函式，因為原始碼還沒學透因此分析得不會很深，后續會考慮回來補充一些遺漏的點和邏輯，
正題
下面我們直接進入正題,直接看核心代碼callhook:
// src\core\instance\lifecycle.js
export function callHook (vm: Component, hook: string) {
// #7573 disable dep collection when invoking lifecycle hooks
pushTarget()
const handlers = vm.$options[hook] //handlers是陣列
if (handlers) {
// 遍歷提取陣列中的方法執行，
for (let i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm)
} catch (e) {
handleError(e, vm, `${hook} hook`)
}
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
popTarget()
}
callHook接受兩個入參，一個是當前vm，一個函式名稱（如："mounted"），往下看，vm.$options上個章節有說過，合并好的配置集合，從中拿出來的handlers則是個陣列方法，上個章節也有詳細說過了，所以我們需要對handlers進行遍歷再呼叫handlers[i].call(vm)，this指向到vm，這也是我們在生命周期的鉤子函式中使用this會指向到vm的原因，
接下來我們看各個生命周期是什么時候被呼叫的，
beforeCreate & created
// src\core\instance\init.js
Vue.prototype._init = function (options?: Object) {
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
...
vm.$mount(vm.$options.el)
}
beforeCreate和created其實就是在_init的時候就運行了，了解過都知道兩者的主要差異是beforeCreate無法操作到data和props的資料，從原始碼可以得到其答案，資料處理的函式initState是在callHook(vm, 'beforeCreate')之后才執行的，
beforeMount & mounted
在_init方法最后我們執行了vm.$mount，進入了掛載階段，
export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean): Component {
...
callHook(vm, 'beforeMount')
...
vm._update(vm._render(), hydrating) //實體掛載（生成真實dom）
...
if (vm.$vnode == null) { //$vnode是父vnode，這里判斷是否為根vnode，
vm._isMounted = true
callHook(vm, 'mounted')
}
}
對mountComponent函式不熟悉的可以回顧一下之前的文章《資料和模板的渲染》，
在mountComponent函式中可以看出，在進行vm._update渲染dom之前就呼叫了beforeMount，因此這個階段是不能操作dom的，
而mounted是分了兩種情況的，一種是為根Vue實體，一種是為子組件，上述的只是展示根Vue實體呼叫mounted，而子組件的mounted是從vm._update進入到patch方法，然后在patch方法結尾呼叫invokeInsertHook函式，
// src\core\vdom\patch.js
export function createPatchFunction (backend) {
...
return function patch (oldVnode, vnode, hydrating, removeOnly) {
...
const insertedVnodeQueue = [];
...
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
}
}
這里我們得理清兩個點，一個是insertedVnodeQueue入參是什么，一個是invokeInsertHook方法做了什么，在了解方法前我們先了解入參insertedVnodeQueue，
在patch方法中，它被定義了陣列，在createElm函式中insertedVnodeQueue以入參的形式傳入到：
// src\core\vdom\patch.js
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
...
invokeCreateHooks(vnode, insertedVnodeQueue)
...
}
在invokeCreateHooks方法中對insertedVnodeQueue做了處理：
// src\core\vdom\patch.js
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)
}
}
當前vnode有定義insert的時候，就會push到insertedVnodeQueue，至于為什么要insert后面會說到，
在createElm函式中還有呼叫到了createComponent函式傳入了insertedVnodeQueue做處理：
// src\core\vdom\patch.js
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
let i = vnode.data
if (isDef(i)) {
const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
if (isDef(vnode.componentInstance)) {
initComponent(vnode, insertedVnodeQueue)
insert(parentElm, vnode.elm, refElm)
if (isTrue(isReactivated)) {
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
}
return true
}
}
}
在initComponent和reactivateComponent函式中，會進行insertedVnodeQueue.push(vnode)，所以insertedVnodeQueue其實就是一個帶有insert方法的vnode陣列集合，
這里還有一個需要注意的小細節
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
還記得之前分析過的這里嗎？組件的遞回，因此在遞回的情況下后續的insertedVnodeQueue.push是先子后父的順序插入的，
invokeInsertHook
接下來我們回到patch函式說一下invokeInsertHook方法，
// src\core\vdom\patch.js
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])
}
}
}
這里關鍵遍歷queue(insertedVnodeQueue)然后運行了queue[i].data.hook.insert函式，所以之前才對insert函式做了判斷才插入vnode到queue，而insert其實在createComponent函式的時候執行installComponentHooks方法，就把insert掛載到了vnode.data.hook上了，我們接下來看看insert做了什么？
// src\core\vdom\create-component.js
const componentVNodeHooks = {
insert (vnode: MountedComponentVNode) {
const { context, componentInstance } = vnode
if (!componentInstance._isMounted) {
componentInstance._isMounted = true
callHook(componentInstance, 'mounted')
}
...
},
}
繞了一大個圈子其實就是為了在insert的時候執行mounted鉤子，然后由于vnode在陣列中的插入順序是先子后父，因此也導致了mounted鉤子函式執行的時候也是先子后父，
beforeUpdate & updated
beforeUpdate和updated執行時機在資料更新時，但是回應式還去分析過，下面就見到說一下什么時候呼叫這個兩個函式，部分細節留待以后分析回應式的時候再看，
beforeUpdate
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component {
...
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
...
}
beforeUpdate是在mountComponent中的渲染watcher監聽中執行的，下面我們看看監聽中的before函式是在哪里呼叫的，
// src\core\observer\scheduler.js
function flushSchedulerQueue () {
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
}
}
這里的queue是所以watch的集合，在遍歷的時候呼叫before執行beforeUpdate鉤子，
updated
updated鉤子其實也是在同個js中實作：
// src\core\observer\scheduler.js
function callUpdatedHooks (queue) {
let i = queue.length
while (i--) {
const watcher = queue[i]
const vm = watcher.vm
if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'updated')
}
}
}
這里也是對queue陣列進行了一次遍歷，然后判斷做了三個判斷：
①：是否為渲染watcher；
②：是否已經經歷過mounted；(mounted鉤子被呼叫前_isMounted會被設定為true)
③：是否被銷毀；
成功后執行updated鉤子函式，
beforeDestroy & destroyed
它們其實都是在Vue.prototype.$destroy銷毀函式中被呼叫，函式具體銷毀邏輯之后在分析，這里我們只簡單看一下beforeDestroy和destroyed是如何被呼叫的，
// src\core\instance\lifecycle.js
Vue.prototype.$destroy = function () {
...
callHook(vm, 'beforeDestroy')
...
vm.__patch__(vm._vnode, null)
callHook(vm, 'destroyed')
...
}
beforeDestroy鉤子函式在銷毀邏輯開始的時候就執行了，然后經過一系列銷毀操作之后，然后去呼叫到了destroyed鉤子函式，值得留意的一個地方是在callHook(vm, 'destroyed')之前，執行了vm.__patch__函式進行對子組件的銷毀，該函式也提及了很多邊，是遞回函式，會造成先子后父的執行邏輯，因此destroyed和mounted一樣，也是先子后父的順序進行，
activated & deactivated
activated 和 deactivated 鉤子函式是專門為 keep-alive 組件定制的鉤子，之后再學習keep-alive的時候再詳解吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/430226.html
標籤：其他