生命周期各个执行时机应用场景怎样海量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

Vue.js组件的生命周期包括创建、更新、销毁等过程。在这些过程中也会运行叫生命周期钩子的函数，

这给了用户在不同阶段添加自己的代码的机会。

在Vue.js2.x中，我们通常会在组件对象中定义一些生命周期钩子函数，到了Vue.js3.0，依然兼容

Vue.js2.x生命周期的语法，但是CompositionAPI提供了一些生命周期函数的API，让我们可以主动

不同的生命周期。

exportdefault{

created(){

},

mounted(){

},

beforeDestroy(){

}

}

import{onMounted,onBeforeUnmount}fromvue

exportdefault{

setup(){

onMounted(()={

})

onBeforeUnmount(()={

})

}

}

可以看到，在Vue.js3.0中，setup函数已经替代了Vue.js2.x的beforeCreate和created钩子函

数，我们可以在setup函数做一些初始化工作，比如发送一个异步Ajax请求获取数据。

我们用onMountedAPI替代了Vue.js2.x的mounted钩子函数，用onBeforeUnmountAPI替代了

Vue.js2.x的beforeDestroy钩子函数。

其实，Vue.js3.0针对Vue.js2.x的生命周期钩子函数做了全面替换，映射关系如下：

beforeCreate-使用setup()

created-使用usesetup()

beforeMount-onBeforeMount

mounted-onMounted

beforeUpdate-onBeforeUpdate

updated-onUpdated

beforeDestroy-onBeforeUnmount

destroyed-onUnmounted

activated-onActivated

deactivated-onDeactivated

errorCaptured-onErrorCaptured

除此之外，Vue.js3.0还新增了两个用于调试的生命周期API：onRenderTracked和

onRenderTriggered。

那么，这些生命周期钩子函数是如何实现的？它们又分别在组件生命周期的哪些阶段执行的？分别

适用于哪些开发场景？

带着这些疑问，我们来深入学习生命周期钩子函数背后的实现原理。

钩子函数

首先，我们来看这些钩子函数是如何的，先来看一下它们的实现：

constonBeforeMount=createHook(bm)

constonMounted=createHook(m)

constonBeforeUpdate=createHook(bu)

constonUpdated=createHook(u)

constonBeforeUnmount=createHook(bum)

constonUnmounted=createHook(um)

constonRenderTriggered=createHook(rtg)

constonRenderTracked=createHook(rtc)

constonErrorCaptured=(hook,target=currentInstance)={

injectHook(ec,hook,target)

}

我们发现除了onErrorCaptured，其他钩子函数都是通过createHook函数创建的，通过传入不同的字

符串来表示不同的钩子函数。

那么，我们就来分析一下createHook钩子函数的实现原理：

constcreateHook=function(lifecycle){

returnfunction(hook,target=currentInstance)