一文帶你理解 Vue 中的生命周期
前言:
每個 Vue
實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM
等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數,給予用戶機會在一些特定的場景下添加他們自己的代碼。
源碼中最終執行生命周期的函數都是調用 callHook
方法,它的定義在 src/core/instance/lifecycle
中:
export function callHook (vm: Component, hook: string) { // #7573 disable dep collection when invoking lifecycle hooks pushTarget() const handlers = vm.$options[hook] 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
函數的邏輯很簡單,根據傳入的字符串 hook,去拿到 vm.$options[hook]
對應的回調函數數組,然後遍歷執行,執行的時候把 vm 作為函數執行的上下文。
1、beforeCreate & created
beforeCreate
和 created
函數都是在實例化 Vue 的階段,在 _init 方法中執行的,它的定義在 src/core/instance/init.js
中:
Vue.prototype._init = function (options?: Object) { // ... 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') // ... }
可以看到 beforeCreate
和 created
的鉤子調用是在 initState
的前後,initState
的作用是初始化 props
、data
、methods
、watch
、computed
等屬性,之後我們會詳細分析。那麼顯然 beforeCreate
的鉤子函數中就不能獲取到 props
、data
中定義的值,也不能調用 methods
中定義的函數。
在這倆個鉤子函數執行的時候,並沒有渲染 DOM,所以我們也不能夠訪問 DOM,一般來說,如果組件在加載的時候需要和後端有交互,放在這倆個鉤子函數執行都可以,如果是需要訪問 props
、data
等數據的話,就需要使用 created
鉤子函數。之後我們會介紹 vue-router
和 vuex 的時候會發現它們都混合瞭 beforeCreatd
鉤子函數。
2、beforeMount & mounted
顧名思義,beforeMount
鉤子函數發生在 mount
,也就是 DOM 掛載之前,它的調用時機是在 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) { updateComponent = () => { const name = vm._name const id = vm._uid const startTag = `vue-perf-start:${id}` const endTag = `vue-perf-end:${id}` mark(startTag) const vnode = vm._render() mark(endTag) measure(`vue ${name} render`, startTag, endTag) mark(startTag) vm._update(vnode, hydrating) mark(endTag) measure(`vue ${name} patch`, startTag, endTag) } } 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, { before () { if (vm._isMounted) { 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 }
在執行 vm. render()
函數渲染 VNode 之前,執行瞭 beforeMount
鉤子函數,在執行完 vm. update()
把 VNode patch
到真實 DOM 後,執行 mouted
鉤子。註意,這裡對 mouted
鉤子函數執行有一個判斷邏輯,vm.$vnode
如果為 null,則表明這不是一次組件的初始化過程,而是我們通過外部 new Vue
初始化過程。那麼對於組件,它的 mounted
時機在哪兒呢?
組件的 VNode patch
到 DOM 後,會執行 invokeInsertHook
函數,把 insertedVnodeQueue
裡保存的鉤子函數依次執行一遍,它的定義在 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]) } } }
該函數會執行 insert
這個鉤子函數,對於組件而言,insert 鉤子函數的定義在 src/core/vdom/create-component.js
中的 componentVNodeHooks
中:
const componentVNodeHooks = { // ... insert (vnode: MountedComponentVNode) { const { context, componentInstance } = vnode if (!componentInstance._isMounted) { componentInstance._isMounted = true callHook(componentInstance, 'mounted') } // ... }, }
我們可以看到,每個子組件都是在這個鉤子函數中執行 mouted
鉤子函數,並且我們之前分析過,insertedVnodeQueue
的添加順序是先子後父,所以對於同步渲染的子組件而言,mounted
鉤子函數的執行順序也是先子後父。
3、beforeUpdate & updated
顧名思義,beforeUpdate
和 updated
的鉤子函數執行時機都應該是在數據更新的時候,到目前為止,我們還沒有分析 Vue
的數據雙向綁定、更新相關,下一章我會詳細介紹這個過程。
beforeUpdate
的執行時機是在渲染 Watcher
的 before
函數中
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { // ... // 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, { before () { if (vm._isMounted) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) // ... }
註意這裡有個判斷,也就是在組件已經 mounted
之後,才會去調用這個鉤子函數。
update
的執行時機是在flushSchedulerQueue
函數調用的時候, 它的定義在 src/core/observer/scheduler.js
中:
function flushSchedulerQueue () { // ... // 獲取到 updatedQueue callUpdatedHooks(updatedQueue) } function callUpdatedHooks (queue) { let i = queue.length while (i--) { const watcher = queue[i] const vm = watcher.vm if (vm._watcher === watcher && vm._isMounted) { callHook(vm, 'updated') } } }
flushSchedulerQueue
函數我們之後會詳細介紹,可以先大概瞭解一下,updatedQueue
是 更新瞭的 wathcer
數組,那麼在 callUpdatedHooks
函數中,它對這些數組做遍歷,隻有滿足當前 watcher
為 vm._watcher
以及組件已經 mounted
這兩個條件,才會執行 updated
鉤子函數。
我們之前提過,在組件 mount
的過程中,會實例化一個渲染的 Watcher
去監聽 vm 上的數據變化重新渲染,這斷邏輯發生在 mountComponent
函數執行的時候:
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { // ... // 這裡是簡寫 let updateComponent = () => { vm._update(vm._render(), hydrating) } new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) // ... }
那麼在實例化 Watcher
的過程中,在它的構造函數裡會判斷 isRenderWatcher
,接著把當前 watcher
的實例賦值給 vm._watcher
,定義在 src/core/observer/watcher.js
中:
export default class Watcher { // ... constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean ) { this.vm = vm if (isRenderWatcher) { vm._watcher = this } vm._watchers.push(this) // ... } }
同時,還把當前 wathcer
實例 push 到 vm. watchers
中,vm. watcher
是專門用來監聽 vm 上數據變化然後重新渲染的,所以它是一個渲染相關的 watcher
,因此在 callUpdatedHooks
函數中,隻有 vm._watcher
的回調執行完畢後,才會執行 updated
鉤子函數。
4、beforeDestroy & destroyed
顧名思義,beforeDestroy
和 destroyed
鉤子函數的執行時機在組件銷毀的階段,組件的銷毀過程之後會詳細介紹,最終會調用 $destroy
方法,它的定義在 src/core/instance/lifecycle.js
中:
Vue.prototype.$destroy = function () { const vm: Component = this if (vm._isBeingDestroyed) { return } callHook(vm, 'beforeDestroy') vm._isBeingDestroyed = true // remove self from parent const parent = vm.$parent if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) { remove(parent.$children, vm) } // teardown watchers if (vm._watcher) { vm._watcher.teardown() } let i = vm._watchers.length while (i--) { vm._watchers[i].teardown() } // remove reference from data ob // frozen object may not have observer. if (vm._data.__ob__) { vm._data.__ob__.vmCount-- } // call the last hook... vm._isDestroyed = true // invoke destroy hooks on current rendered tree vm.__patch__(vm._vnode, null) // fire destroyed hook callHook(vm, 'destroyed') // turn off all instance listeners. vm.$off() // remove __vue__ reference if (vm.$el) { vm.$el.__vue__ = null } // release circular reference (#6759) if (vm.$vnode) { vm.$vnode.parent = null } }
beforeDestroy
鉤子函數的執行時機是在 destroy
函數執行最開始的地方,接著執行瞭一系列的銷毀動作,包括從parent
的children
中刪掉自身,刪除 watcher
,當前渲染的 VNode
執行銷毀鉤子函數等,執行完畢後再調用 destroy
鉤子函數。
在 $destroy 的執行過程中,它又會執行 vm. patch (vm._vnode, null)
觸發它子組件的銷毀鉤子函數,這樣一層層的遞歸調用,所以 destroy
鉤子函數執行順序是先子後父,和 mounted 過程一樣。
5、activated & deactivated
activated 和 deactivated
鉤子函數是專門為 keep-alive
組件定制的鉤子,我們會在介紹 keep-alive
組件的時候詳細介紹,這裡先留個懸念。
總結:
這一節主要介紹瞭 Vue 生命周期中各個鉤子函數的執行時機以及順序,通過分析,我們知道瞭如在 created
鉤子函數中可以訪問到數據,在 mounted
鉤子函數中可以訪問到 DOM,在 destroy
鉤子函數中可以做一些定時器銷毀工作,瞭解它們有利於我們在合適的生命周期去做不同的事情。
到此這篇關於一文帶你理解 Vue 中的生命周期的文章就介紹到這瞭,更多相關 Vue 中的生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!