vue实例生命周期与生命周期钩子
每个 Vue 实
例在被创建时都会经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。为了让开发者在Vue实例生命周期的不同阶段有机会插入自己的代码逻辑，vue提供了一种叫做生命周期钩子的函数。主要的生命周期钩子如下：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
官方提供的vue实例生命周期示意图很好地说明了整个过程。大家可以参考这张图来阅读本文。
初始化
执行new Vue()后，将进入实例初始化阶段。这个阶段会触发两个钩子：beforeCreate 和 created。看下主要代码：
// Vue构造函数
function Vue (options) {
// 实例初始化
this._init(options)
}
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid 为每个vue实例分配一个唯一的id
vm._uid = uid++
vm._isVue = true
//...省略部分代码
if (options && options._isComponent) {
// 合并组件选项对象
initInternalComponent(vm, options)
} else {
// 合并vue选项对象
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
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
// 初始化完成后，调用created钩子函数
callHook(vm, 'created')
//...省略部分代码
// 如果指定了挂载元素，则执行挂载逻辑
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}beforeCreate
从_init方法中可以看到，vue会将用户所定义的选项对象与vue构造函数上所预先定义的静态选项对象进行合并。
调用initLifecycle函数为实例初始化生命周期有关的属性。例如初始化vue实例_isMounted、_isDestroyed、_inactive等属性的值。
调用 initEvents 函数为实例初始化事件相关的属性。例如初始化vue实例的_events、_hasHookEvent等属性的值。
调用initRender函数为实例初始化渲染相关的属性。例如初始化vue实例的 _vnode、_c()、$slots等属性的值。
由此可知，beforeCreate钩子被调用时，已经初始化完成了lifecycle、render、event；但尚未处理data、props、methods、provide/inject、watch、computed等。
created
从代码中能看到，created 钩子被调用时，先后执行了initInjections、initState和 initProvide。这几个函数主要是将data、props、inject、methods、computed、watch中所定义的属性使用defineProperty代理到vue实例上。同时会把data、props、inject、computed、watch中的属性全部转换成响应式的。经过这些处理，后面当我们在实例中修改属性值的时候，就会自动触发页面的重绘了。
由此可知，created钩子被调用时，完成了实例的初始化，实例属性也具备了响应式的能力。但尚未开始DOM元素的挂载。一般在钩子里常见的操作是异步向后端获取数据。
DOM 元素挂载
实例初始化完成后，会调用$mount开始DOM元素挂载。这个阶段会触发两个钩子函数：beforeMount和mounted。
// src/platforms/web/entry-runtime-with-compiler.js
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}// src/platforms/web/runtime/index.js
// 覆写$mount方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
const options = this.$options
if (!options.render) {
let template = options.template
// 选项中指定了template
if (template) {
if (typeof template === 'string') {
// 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板
if (template.charAt(0) === '#') {
template = idToTemplate(template)
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
// 虽然在文档中并未说明，但template还可以指定一个DOM元素作为模板
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
// 选项中指定了el
template = getOuterHTML(el)
}
// 将模板解析成render函数
if (template) {
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
}
}
// ...省略部分代码
return mount.call(this, el, hydrating)
}// src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
// 将对DOM元素的引用保存到$el
vm.$el = el
// ...省略部分代码
// 调用beforeMount前需要执行模板编译逻辑
callHook(vm, 'beforeMount')
let updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
if (vm.$vnode == null) {
// 标记为已挂载
vm._isMounted = true
// 触发mounted事件
callHook(vm, 'mounted')
}
return vm
}beforeMount
我们知道vue需要render函数来生成vnode。但是在实际开发中，基本都是通过template和el来指定模板，很少直接提供一个render函数。因此在触发beforeMount前，vue最重要的一个工作就是将HTML模板编译成render函数。beforeMount钩子函数被调用时，我们尚不能访问DOM元素。
mounted
每个vue实例都会对应一个render watcher。render watcher 会创建vnode(通过_render方法)，并对vnode进行diff后，创建或者更新DOM元素（通过_update方法）。对于初次渲染来说，当创建完DOM元素后，把DOM树的根元素插入到body中，然后触发mounted钩子函数。此时，在钩子函数中可以对DOM元素进行操作了。
更新
实例完成初始化和挂载之后，如果由于用户的交互导致实例的状态发生了变化，实例将进入更新阶段。例如在代码中执行 this.msg = 'update msg'，vue实例需要更新DOM元素。
实例的更新是异步的。前面提到过，render watcher 会负责调度程序创建vnode、创建更新DOM元素。当数据发生变化后，vue不会立即启动DOM的更新，而是先把实例对应的render watcher添加到一个队列中。然后在下一个事件循环中，统一执行DOM更新，清空队列。也就是调用下面代码中的flushSchedulerQueue函数。
此阶段会触发的钩子是：beforeUpdate 和updated。
/**
* 清空所有的队列并执行watcher的更新逻辑
*/
function flushSchedulerQueue () {
flushing = true
let watcher, id
// 队列按照watcher的id升序排序，目的是确保：
// 1. 组件总是从父向子进行更新
// 2. 用户创建的watcher先于渲染watcher更新
// 3. 如果组件在父组件的watcher运行时被销毁，该组件的watcher可以跳过处理
queue.sort((a, b) => a.id - b.id)
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
// 调用watcher.before，触发beforeUpdate钩子
if (watcher.before) {
watcher.before()
}
id = watcher.id
has[id] = null
// 更新dom
watcher.run()
}
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()
resetSchedulerState()
// 触发activated钩子
callActivatedHooks(activatedQueue)
// 触发updated钩子
callUpdatedHooks(updatedQueue)
}
// 触发updated钩子
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')
}
}
}beforeUpdate
在初始化阶段，vue实例中的数据（data/props/computed/watch）已经被处理成响应式的了。任何对数据的访问（getter）都会被watcher添加为依赖，任何对数据的变更，都将触发对数据有依赖的watcher的更新。watcher在更新之前会调用watcher.before方法，该方法是在挂载阶段创建watcher实例的时候定义的。watcher.before中会触发beforeUpdate钩子。此时vue实例只是确定了最终需要更新的数据，尚未真正开始更新。
updated
从代码中可以看到，在触发updated钩子前，vue实例需要对DOM元素进行更新。更新的过程是异步的。具体方式通过实例的render watcher执行run方法。该方法会去调用我们在挂载阶段介绍的updateComponent函数。从而重新创建vnode，并进行vnode的diff操作后更新DOM元素。
我们还注意到，代码中调用了callActivatedHooks函数，该函数用来触发activated钩子。下文我们再做说明，这里不展开。
销毁
当vue实例的$destroy方法时，实例将进入销毁阶段。此时触发的钩子是：beforeDestory和destroyed。
// 销毁Vue实例
Vue.prototype.$destroy = function () {
const vm: Component = this
// 避免重复执行销毁操作
if (vm._isBeingDestroyed) {
return
}
// 触发实例的beforeDestroy钩子
callHook(vm, 'beforeDestroy')
vm._isBeingDestroyed = true
// 将实例从其父实例中的$chilren中移除（断开与父实例的联系）
const parent = vm.$parent
if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
remove(parent.$children, vm)
}
// 销毁实例的 watchers
if (vm._watcher) {
vm._watcher.teardown()
}
let i = vm._watchers.length
while (i--) {
vm._watchers[i].teardown()
}
if (vm._data.__ob__) {
vm._data.__ob__.vmCount--
}
vm._isDestroyed = true
// 销毁指令、ref等
vm.__patch__(vm._vnode, null)
// 触发destroyed事件
callHook(vm, 'destroyed')
// 移除实例的所有事件监听器
vm.$off()
if (vm.$el) {
vm.$el.__vue__ = null
}
// 释放循环引用(#6759)
if (vm.$vnode) {
vm.$vnode.parent = null
}
}
}beforeDestroy
从代码中可以看到，$destroy被调用时，在执行实际的销毁动作前触发beforeDestroy。此时，由于并未开始执行实际的销毁代码，实例及DOM元素仍可正常访问。
destroyed
从代码中可以看到，销毁操作主要包括以下几点：清空所有的watcher、删除所有的指令、删除DOM元素并关闭DOM上的所有的事件、断开与父实例之间的关系、将实例标记成已销毁状态。此时实例已经被销毁，已经无法访问实例的属性和DOM元素了。
keep-alive包裹下的组件的生命周期钩子
下面的两个钩子只有当组件包裹在keep-alive时才会触发。
activated
HTML标签和组件标签在vue内部实现中都有对应的vnode，组件vnode在设计上与普通的HTML标签的vnode有所不同。例如组件vnode上包含init、prepatch、insert、destroy等钩子。这些钩子在组件实例初始化、更新和销毁等不同的阶段进行调用。
// 组件vnode的钩子
const componentVNodeHooks = {
// ...省略其他钩子
insert (vnode: MountedComponentVNode) {
const { context, componentInstance } = vnode
if (!componentInstance._isMounted) {
componentInstance._isMounted = true
// 触发组件的mounted钩子
callHook(componentInstance, 'mounted')
}
if (vnode.data.keepAlive) {
if (context._isMounted) {
queueActivatedComponent(componentInstance)
} else {
activateChildComponent(componentInstance, true /* direct */)
}
}
}
}
// 触发activated钩子
export function activateChildComponent (vm: Component, direct?: boolean) {
// ...省略部分代码
if (vm._inactive || vm._inactive === null) {
vm._inactive = false
for (let i = 0; i < vm.$children.length; i++) {
activateChildComponent(vm.$children[i])
}
// 调用实例的activated钩子
callHook(vm, 'activated')
}
}与根实例一样，keep-alive包裹下的组件实例初始化时同样会依次经历初始化阶段、挂载阶段，但在挂载阶段之后会调用组件vnode的insert钩子，insert钩子会触发组件实例的activated钩子。因为insert 是在组件实例挂载完成后调用的，所以mounted的触发早于activated。
当组件切换回来的同时，组件的数据发生了变化，此时组件将进入更新阶段，意味着将会依次触发beforeUpdate和updated钩子。
那么问题来了，activated、beforeUpdate和updated钩子哪个先触发呢？
答案是先触发beforeUpdate，再触发activated，最后触发updated。
我们回顾下前面更新阶段的代码：
// 触发activated钩子
callActivatedHooks(activatedQueue)
// 触发updated钩子
callUpdatedHooks(updatedQueue)
//...省略部分代码
// 触发activated钩子
function callActivatedHooks (queue) {
for (let i = 0; i < queue.length; i++) {
queue[i]._inactive = true
activateChildComponent(queue[i], true /* true */)
}
}可以看到在函数flushSchedulerQueue中，callActivatedHooks函数用来触发activated。而callActivatedHooks的顺序在callUpdatedHooks前面，所以activated钩子的触发早于updated钩子。
deactivated
const componentVNodeHooks = {
// ... 省略其他钩子
destroy (vnode: MountedComponentVNode) {
const { componentInstance } = vnode
if (!componentInstance._isDestroyed) {
// 未被keep-alive包裹销毁组件
if (!vnode.data.keepAlive) {
componentInstance.$destroy()
} else {
// 被keep-alive包裹
deactivateChildComponent(componentInstance, true /* direct */)
}
}
}
}
export function deactivateChildComponent (vm: Component, direct?: boolean) {
if (direct) {
vm._directInactive = true
if (isInInactiveTree(vm)) {
return
}
}
if (!vm._inactive) {
vm._inactive = true
for (let i = 0; i < vm.$children.length; i++) {
deactivateChildComponent(vm.$children[i])
}
// 调用实例的deactivated钩子
callHook(vm, 'deactivated')
}
}当组件被切换到其他的组件时，会调用组件vnode的destroy钩子，在组件被keep-alive包裹的情况下，只会将组件对应的DOM元素从DOM树删除，但不会销毁组件实例，此时会调用deactivateChildComponent 从而触发deactivated钩子。组件在没有被keep-alvie包裹的情况下，才会调用$destroy销毁组件实例，触发beforeDestroy和destroyed钩子。
总结
关于vue实例的生命周期，官网讲解的其实是比较简单易懂的。本文主要还是希望能从源码的角度，进一步让大家理解每个生命周期做了什么处理。更好地理解钩子的触发时机及先后顺序。欢迎大家留言讨论~
推荐阅读
好文我在看👇
2955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
