作者：zhaoHui_Ti 链接：https://www.jianshu.com/p/5d44ade3e837
使用Vue开发对于Vue生命周期的理解自然少不了，以前在面试时候也被问到过，当时也就只能回答出生命周期的几个钩子函数 created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。还有当使用<keep-alive>进行组件缓存的时候会有activated、deactivated生命周期。
先看官网图：
本文就我根据资料阅读Vue生命周期源码来了解生命周期中都做了哪些事情。
初始化流程
// src/core/instance/index.js :8
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)
}
当我们调用new Vue()的时候，会直接调用Vue实例上的_init方法。
// src/core/instance/init.js :15
Vue.prototype._init = function (options?: Object) {
//...
initLifecycle(vm) // 初始化生命周期相关属性
initEvents(vm) // 初始化事件
initRender(vm) //初始化渲染函数
callHook(vm, 'beforeCreate')
}
在_init方法中，先对实例上的属性进行一些处理，比如合并组件options，初始化生命周期相关属性（绑定父组件，根组件等），初始化事件（父组件添加的事件），初始化渲染函数（给实例添加$attrs和$listeners属性），然后调用beforeCreate生命周期钩子函数。
beforeCreate被调用完成之后做了以下几件事
// src/core/instance/init.js :15
Vue.prototype._init = function (options?: Object) {
//...
callHook(vm, 'beforeCreate')
initInjections(vm) // 初始化inject
initState(vm) //初始化state
initProvide(vm) // 初始化provide
callHook(vm, 'created') //调用created生命周期
}
初始化inject
初始化state
初始化props
初始化methods
初始化data
初始化computed
初始化watch
初始化provide
在initState方法中：
//src/core/instance/state.js :48
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props) //初始化props
if (opts.methods) initMethods(vm, opts.methods) //初始化methods
if (opts.data) {
initData(vm) //初始化data
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed) //初始化computed
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch) //初始化watch
}
}
由方法执行顺序可知，在data中可以使用props，不会报错，反过来则不行。然后执行created钩子函数created执行完成之后，会去调用vm.$mount()方法，开始挂载组件到dom上。
//src/core/instance/init.js :68
//...
callHook(vm,"created")
//...
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
感觉$mount方法比较重要，先看看$mount方法。
// src/platforms/web/runtime/index.js :37
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
其中核心是mountComponent方法
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
)
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
callHook(vm, 'beforeMount')
//...
}
这一步主要是判断当前实例是否含有render函数，如果有render函数那么就准备开始执行beforeMount钩子函数，否则直接提示报错“Failed to mount component: template or render function not defined”。
如果使用了runtime-with-compile版本(没有render函数)详情见官网运行时 + 编译器 vs. 只包含运行时 在实例化Vue时，将传入的template通过一系列编译生成render函数。
编译这个template,生成AST抽象语法树。
优化这个AST,标记静态节点。（渲染过程中不会变得那些节点，优化性能）。
根据AST，生成render函数。
对应代码如下：
const ast = parse(template.trim(),options)
if(options.optimize !== false){
optimize(ast,options)
}
const code = generate(ast,options)
总之，在有了render函数之后，就可以进行渲染步骤了，执行beforeMount钩子函数。
beforeMount执行完成之后接着往下走:
//...
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)
}
}
//...
定义一个渲染组件的函数updateComponent
updateComponent = () => {
vm._update(vm._render,hydrating)
}
vm._render就是调用render函数生成一个vnode,而vm._update方法则会对这个vnode进行patch操作，帮我们把vnode通过cleateElm函数创建新节点，并且渲染到dom中。
//src/core/instance/lifecycle.js :59
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
//...
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
//...
}
看完updateComponent方法里面的具体实现之后
接下来就是要执行，updateComponent方法了。
执行是由Watcher类负责执行的。
//src/core/instance/lifecycle.js :197
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
为什么要用Watcher来执行呢？因为在执行过程中，需要去观测这个函数依赖了哪些响应式的数据，将来在数据更新的时候，我们需要再重新执行updateComponent函数。
如果是更新后调用updateComponent函数，updateComponent内部的patch就不再是初始化的时候创建节点，而是通过diff算法将差异的地方找到，以最小化的代价更新到真实dom上。
Watcher中有一个before方法，逻辑是当vm._isMounted,也就是第一次挂载完成之后，再次更新视图之前，会先调用beforeUpdate钩子函数。
注意：如果在render过程中有子组件的话，此时子组件也会有一系列的初始化过程，也会走之前所说的所有过程，因此这是一个递归构建过程。
当有子组件时生命周期执行过程：
父 beforeCreate
父 created
父 beforeMount之后--->render
子 beforeCreate
子 created
子 beforeMount之后--->render
子 mounted
父 mounted
//src/core/instance/lifecycle.js :208
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
最终mounted生命周期钩子函数触发
更新流程
当一个响应式属性被更新，触发了Watcher的回调函数，也就是updateComponent 方法
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
在更新之前会先进行判断，是否是更新vm._isMounted如果是更新那么就会直接执行beforeUpdate生命周期钩子。
Vue 异步执行 DOM 更新
由于Vue组件的异步更新机制，当响应式数据发生变化，根据数据劫持此时会调用dep.notify（src/core/observer/index.js : 191）,之后会在Dep中去遍历所有watcher进行更新subs[i]update()（src/core/observer/dep.js : 47），之后在Watcher中会发现，在调用update方法后，会调用Watcher中的update方法（）会发现它执行了一个叫queueWatcher的方法，具体可以看下代码。
// src/core/observer/scheduler.js :164
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}
}
从代码中可以看到，queueWatcher方法主要做了几件事
将watcher存到一个队列queue中, 在nextTick方法中执行flushSchedulerQueue方法
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
flushing = true
let watcher, id
queue.sort((a, b) => a.id - b.id)
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
id = watcher.id
has[id] = null
watcher.run()
}
在flushSchedulerQueue方法中主要干的事情就是，遍历执行存放watcher的queue,并且判断如果当前watcher有before方法，那么就先执行watcher.before，此时就会触发之前的callHook(vm, 'beforeUpdate')方法，触发beforeUpdate生命周期钩子函数(src/core/instance/lifecycle.js)。而nextTick方法就是将flushSchedulerQueue方法存到一个数组callbacks中
// src/core/util/next-tick.js :87
export function nextTick (cb?: Function, ctx?: Object) {
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
}
最终会执行timerFunc方法
//src/core/instance/util/next-tick.js :33
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
这段代码就是nextTick的核心代码了，Vue响应式更新为什么是异步的也在这里能找到答案，首先判断运行环境是否支持Promise，如果不支持就判断是否支持MutationObserver,如果不支持，就去判断是否支持setImmediate,如果还不支持就用setTimeout大法。最终最终会将callbacks数组中的方法在异步方法中执行，到此，Vue响应式异步更新也差不多梳理了一遍。beforeUpdate生命周期执行完之后，就开始一系列的patch、diff流程后组件渲染完毕之后就会调用updated生命周期钩子函数。
//src/core/observer/scheduler.js :130
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')
}
}
}
注意：这里watcher中的updated是倒序调用的，所以当同一个属性在父-子组件中都有使用，收集依赖是按照父->子收集，但是触发updated钩子函数却是子->父。updated生命周期钩子函数执行完成之后渲染更新流程也就到此结束。
销毁流程
在更新流程中，如果发现有组件在下一轮渲染中消失，比如v-for对应的数组中少了数据，或者v-if控制的组件由true变为false,那么就会调用removeVnodes进入组件的销毁流程。
removeVnodes会调用vnode的destroy生命周期，而destroy内部则会调用vm.destroy.(keep-alive包裹的子组件除外)
这时就会调用callHook(vm,‘beforeDestroy’)
//src/core/instance/lifecycle.js :97
Vue.prototype.$destroy = function () {
const vm: Component = this
if (vm._isBeingDestroyed) {
return
}
callHook(vm, 'beforeDestroy')
vm._isBeingDestroyed = true
const parent = vm.$parent
if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
remove(parent.$children, vm)
}
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
vm.__patch__(vm._vnode, null)
callHook(vm, 'destroyed')
vm.$off()
if (vm.$el) {
vm.$el.__vue__ = null
}
if (vm.$vnode) {
vm.$vnode.parent = null
}
}
}
beforDestroy生命周期钩子函数调用完之后，就会进行一系列的清理逻辑，比如断开父子关系，关闭watcher，移除引用的data等，之后会调用callHook(vm, 'destroyed') destroyed生命周期钩子函数执行完成。注意这里的销毁不是指将组件从试图中移除，使用dom获取方法还能获取到，这里指的销毁是切断组件生命，使其失去活力，Vue响应式等其他生命活动，销毁后的组件全程不会参与而已。到此Vue整个生命周期也就结束了，实际上官网的生命周期图就已经完美的诠释了一切，这里只是从源码中又多窥探到一些东西而已，源码中其实还掺有复杂的逻辑，我在看的时候选择性的抛开，只看它主线上的逻辑。不过也还有看不懂的地方，记录如有错误，还望不吝指出。
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
