一、vue2生命周期图
二、vue2生命周期源码分析
-
初始化
Vue.prototype._init = function(options){
//合并options属性
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
//初始化一些实例属性如:$parent、$root、$children、$refs等
initLifecycle(vm);
//初始化事件:指将父组件在模板中使用的v-on注册的事件添加到子组件的事件系统(Vue.js的事件系统)中
initEvents(vm);
//初始化渲染相关如 $createElement,并且定义了 $attrs 和 $listeners 为浅层响应式属性。
//定义了$slots、$scopedSlots等
initRender(vm);
callHook(VM,'beforeCreate');
//初始化inject
initInjections(vm);
//初始化状态:props、methods、data、computed和watch
initState(vm);
//初始化provide
initProvide(vm);
callHook(vm,'created');
//如果用户在实例化Vue.js时传递了el选项,则自动开启模板编译阶段与挂载阶段
//如果没有传递el选项,则不进入下一个生命周期流程
//用户需要执行vm.$mount方法,手动开启模板编译阶段与挂载阶段
if(vm.$options.el){
vm.$mount(vm.$options.el);
}
}
-
挂载
1、在不同的构建版本中,vm.$mount的表现都不一样。其差异主要体现在完整版(vue.js)和只包含运行时版本(vue.runtime.js)之间。
2、完整版和只包含运行时版本之间的差异在于是否有编译器,而是否有编译器的差异主要在于vm.$mount方法的表现形式。
3、在只包含运行时的构建版本中,vm.$mount的作用如前面所述。而在完整的构建版本中,vm.$mount的作用会稍有不同,它首先会检查template或el选项所提供的模板是否已经转换成渲染函数(render函数)。如果没有,则立即进入编译过程,将模板编译成渲染函数,完成之后再进入挂载与渲染的流程中。
4、只包含运行时版本的vm.$mount没有编译步骤,它会默认实例上已经存在渲染函数,如果不存在,则会设置一个。并且,这个渲染函数在执行时会返回一个空节点的VNode,以保证执行时不会因为函数不存在而报错。同时如果是开发环境下运行,Vue.js会触发警告,提示我们当前使用的是只包含运行时的版本,会让我们提供渲染函数,或者去使用完整的构建版本。
5、从原理的角度来讲,完整版和只包含运行时版本之间是包含关系,完整版包含只包含运行时版本。
完整版:需要模板编译过程
const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
el = el && query(el);
const options = this.$options;
if(!options.render){
<!-- 新增获取模板相关逻辑 -->
let template = options.template;
if(template){
}else if(el){
template = getOuterHTML(el);
}
}
return mount.call(this,el);
}
运行时版本:
Vue.prototype.$mount = function(el){
el = el && inBrower ? query(el) : undefined;
return mountComponent(this,el);
}
export function mountComponent(vm,el){
if(!vm.$options.render){
vm.$options.render = createEmptyVNode;
if(process.env.NODE_ENV !== 'production'){
<!-- 在开发环境发出警告 -->
}
<!-- 触发生命周期钩子 -->
callHook(vm,'beforeMount');
<!-- 挂载 -->
vm._watcher = new Watcher(vm,()=>{
vm._update(vm._render())
},noop);
<!-- 触发生命周期钩子 -->
callHook(vm,'mounted');
return vm;
}
}
1、vm._update作用:调用虚拟DOM中的patch方法来执行节点的比对与渲染操作。
2、vm._render作用:执行渲染函数,得到一份新的VNode节点树。
3、vm._update(vm._render())作用:先调用渲染函数得到一份最新的VNode节点树,然后通过vm._update
-
销毁
Vue.prototype.$destory = function(){
const vm = this;
<!-- 防止重复销毁 -->
if(vm._isBeingDestroyed){
return;
}
<!-- 调用钩子函数beforeDestroy -->
callHook(vm,"beforeDestroy");
vm._isBeingDestroyed = = true;
<!-- 删除自己与父级之间的连接 -->
const parent = vm.$parent;
if(parent && !parent._isBeingDestroyed && !vm.$options.abstract){
remove(parent.$children,vm);
}
<!-- 从watcher监听的所有状态的依赖列表中移除watcher -->
if(vm._watcher){
vm._watcher.teardown();
}
let i = vm._watchers.length;
<!-- 将从vm.$watcher创建的watcher实例从它所监听的状态的依赖列表中移除 -->
while(i--){
vm._watchers[i].teardown();
}
<!-- 表示实例已经被销毁 -->
vm._isDestroyed = true;
<!-- 将模板中的所有指令解绑 -->
vm._patch_(vm._vnode,null)
<!-- 触发destroyed钩子函数 -->
callHook(vm,'destroyed')
<!-- 移除实例上的所有事件监听器 -->
vm.$off();
}
三、生命周期的作用
Vue.js生命周期可以分为4个阶段:
- 初始化阶段(new Vue()->created):主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等
- 模板编译阶段(created->beforeMounted):主要目的是将模板编译为渲染函数,只存在于完整版中。
- 挂载阶段(beforeMount->mounted):Vue.js会将其实例挂载到DOM元素上,通俗地讲,就是讲模板渲染到指定的DOM元素中。在挂载的过程中,Vue.js会开启Watcher来持续追踪依赖的变化。
- 卸载阶段(beforeDestory->destoryed):Vue.js会将自身从父组件中删除,取消实例上所有依赖的追踪并且移除所欲的事件监听器
- new Vue()=>beforeCreate:
1、initLifecycle:初始化一些实例属性如:$parent、$root、$children、$refs等。
2、initEvents:初始化事件相关的属性:指将父组件在模板中使用的v-on注册的事件添加到子组件的事件系统(Vue.js的事件系统)中。
3、initRender:vm 添加了一些虚拟 dom、slot 等相关的属性和方法。
- beforeCreate=>created
1、initInjections:初始化inject
2、initState:初始化状态:props、methods、data、computed和watch
3、initProvide:初始化provide
- created=>beforeMount
1、主要目的为将模板编译为渲染函数。
2、如果用户没有通过template选项设置模板,那么会从el选项中获取HTML字符串当作模板。
- beforeMount=》mounted
1、Vue.js会将其实例挂载到DOM元素上,通俗地讲,就是将模板渲染到指定的DOM元素中。
2、在挂载的过程中,Vue.js会开启Watcher来持续追踪依赖的变化。
五、生命周期实现原理
(1)Vue.js通过callHook函数来触发生命周期钩子。
(2)callHook的作用是触发用户设置的生命周期钩子,而用户设置的生命周期钩子会在执行new Vue()时通过参数传递给Vue.js。也就是说,可以在Vue.js的构造函数中通过options参数得到用户设置的生命周期钩子。
(3)用户传入的options参数最终会与构造函数的options属性合并并生成新的options并赋值到vm.$options属性中,所以可以通过vm.$options得到用户设置的生命周期函数。例如,通过vm.$options.created得到用户设置的created钩子函数。
(4)Vue.js在合并options的过程中会找出options中所有key是钩子函数的名字,并将它转换成数组。
(5)实现原理:只需要从vm.$options中获取生命周期钩子列表,遍历列表,执行每一个生命周期钩子,就可以触发钩子函数。
export function callHook(vm,hook){
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')
}
}
}
}
六、不常用生命周期
- activated: keep-alive 组件激活时调用,该钩子在服务器端渲染期间不被调用。
- deactivated :keep-alive 组件停用时调用,该钩子在服务器端渲染期间不被调用。
- errorCaptured :当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
七、vue3生命周期
- onBeforeMount():注册一个钩子,在组件被挂载之前被调用。
- onMounted():注册一个回调函数,在组件挂载完成后执行
- onBeforeUpdate():注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
- onUpdated():注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
- onBeforeUnmount():注册一个钩子,在组件被挂载之前被调用。
- onUnmounted():注册一个回调函数,在组件实例被卸载之后调用。
- onErrorCaptured():注册一个钩子,在捕获了后代组件传递的错误时调用。
- onRenderTracked():注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。(这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。)
- onRenderTriggered():注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。(这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。)
- onActivated():注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。
- onDeactivated():注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。
- onServerPrefetch():注册一个异步函数,在组件实例在服务器上被渲染之前调用。(SSR only)
-
与 vue2 的 options API 区别:
- 写法区别,都变成on+Name。
- composition API 提供了 setup 函数作为入口函数,替换了 beforeCreate 和 created 这两个生命周期钩子。 所以在实际开发中,我们可以简单的把 setup 理解为 created 进行使用。
- beforeDestroy -> beforeUnmount、Destoryed -> Unmounted。
- 提供了两个可用于调试目的的钩子:onRenderTracked和onRenderTriggered。(仅在开发模式下可用)
- 提供了SSR专用生命周期onServerPrefetch。
-
原理
Vue3的生命周期Hooks函数的实现原理还是比较简单的,就是把各个生命周期的函数挂载或者叫注册到组件的实例上,然后等到组件运行到某个时刻,再去组件实例上把相应的生命周期的函数取出来执行。
(1)生命周期类型
// packages/runtime-core/src/component.ts
export const enum LifecycleHooks {
BEFORE_CREATE = 'bc', // 创建之前
CREATED = 'c', // 创建
BEFORE_MOUNT = 'bm', // 挂载之前
MOUNTED = 'm', // 挂载之后
BEFORE_UPDATE = 'bu', // 更新之前
UPDATED = 'u', // 更新之后
BEFORE_UNMOUNT = 'bum', // 卸载之前
UNMOUNTED = 'um', // 卸载之后
// ...
}
(2) 各个生命周期Hooks函数的创建
// packages/runtime-core/src/apiLifecycle.ts
export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
(3) 创建生命周期函数createHook
// packages/runtime-core/src/apiLifecycle.ts
export const createHook = (lifecycle) => (hook, target = currentInstance) => injectHook(lifecycle, hook, target)
createHook是一个闭包函数,通过闭包缓存当前是属于哪个生命周期的Hooks,target表示该生命周期Hooks函数被绑定到哪个组件实例上,默认是当前工作的组件实例。createHook底层又调用了一个injectHook的函数。
(4) injectHook函数
injectHook是一个闭包函数,通过闭包缓存绑定对应生命周期Hooks到对应的组件实例上。
// packages/runtime-core/src/apiLifecycle.ts
export function injectHook(type, hook, target) {
if(target) {
// 把各个生命周期的Hooks函数挂载到组件实例上,并且是一个数组,因为可能你会多次调用同一个组件的同一个生命周期函数
const hooks = target[type] || (target[type] = [])
// 把生命周期函数进行包装并且把包装函数缓存在__weh上
const wrappedHook =
hook.__weh ||
(hook.__weh = (...args: unknown[]) => {
if (target.isUnmounted) {
return
}
// 当生命周期调用时 保证currentInstance是正确的
setCurrentInstance(target)
// 执行生命周期Hooks函数
const res = args ? hook(...args) : hook()
unsetCurrentInstance()
return res
})
// 把生命周期的包装函数绑定到组件实例对应的hooks上
hooks.push(wrappedHook)
// 返回包装函数
return wrappedHook
}
}
- 首先拿到
target
(也就是组件实例)的对应类型的钩子函数的数组,比如目前注入的是onMounted
钩子,对应类型m
,那么我们先拿到hooks = target['m']
,对应目前已经注册的onMounted
钩子- 然后把
hook
(也就是我们传给钩子函数的回调)和错误处理的内容包裹到了一起,从而得到wrappedHook
,再把wrappedHook
放到hooks
当中
(5)生命周期Hooks的调用
按生命周期来分,不同的钩子函数回调的触发时机不同,例如:
onBeforeMount
、onMounted
:触发时机在mountComponent
阶段,具体代码位于renderer.ts
的setupRenderEffect
函数中onBeforeUpdate
、onUpdated
:触发时机在updateComponent
阶段,代码同样位于setupRenderEffect
函数中onBeforeUnmount
、onUnmounted
:触发时机在unmountComponent
阶段,代码位于unmountComponent
函数中按触发方式来分,可以分为同步和异步两类:
- 同步:
onBeforeMount
、onBeforeUpdate
、onBeforeUnmount
- 异步:
onMounted
、onUpdated
、onUnmounted
// 仅保留了钩子函数相关代码
const componentUpdateFn = () => {
if (!instance.isMounted) {
const { bm, m, parent } = instance
// beforeMount hook
if (bm) {
invokeArrayFns(bm)
}
// mounted hook
if (m) {
queuePostRenderEffect(m, parentSuspense)
}
} else {
// updateComponent
let { next, bu, u, parent, vnode } = instance
// beforeUpdate hook
if (bu) {
invokeArrayFns(bu)
}
// updated hook
if (u) {
queuePostRenderEffect(u, parentSuspense)
}
}
}
1、从代码可以看到,当实例还没有被挂载的情况下,组件实例上的bm和m会被解构出来,这两个变量就是onBeforeMounted和onMounted的钩子函数回调数组。
2、对于bm,invokeArrayFns函数以同步的形式对bm中的回调进行调用
export const invokeArrayFns = (fns: Function[], arg?: any) => {
for (let i = 0; i < fns.length; i++) {
fns[i](arg)
}
}
对于m,queuePostRenderEffect函数以异步的形式对m中的回调进行调用。
(6)vue3的调度机制
- vue中的异步任务在执行时存在顺序关系,从先到后分别是pre > DOM更新 > post >
- nextTick 通过调用queuePostRenderEffect,m会被添加到post这个时机的任务队列当中,从而异步地在post时机被执行
原因:
因为watch和计算属性的更新时机位于pre阶段,如果同步调用m的回调,就会导致在onMounted回调中无法访问到最新的值。并且onMounted本身也意味着DOM挂载后这个时点,因此理应在位于DOM更新时点之后的post节点,onUpdated和onUnmounted也是同理。
(7)小结
- 首先,关注点分离到了不同的文件当中。注入逻辑放在生命周期逻辑相关文件中,调用行为放在组件实例逻辑的文件中,具体的调度逻辑放在调度器的文件当中。
- 其次,这种设计方式利用了已有的底层机制(调度器),只为组件实例添加了一个属性(就是hooks数组),对已有的代码结构完全没有破坏性,就实现了生命周期钩子。