vue3 生命周期函数，就是在组件运行的某一条件下会被自动触发的函数。
Vue3 选项式生命周期函数
vue3 新增组合式 API ，同时也能够支持选项式 API。使用选项式 API 写法时，生命周期函数与 vue2 得一模一样：
<script lang="ts">
export default{
beforeCreate(){
console.log('beforeCreate');
},
created(){
console.log("created");
},
beforeMount(){
console.log("beforeMount");
},
mounted(){
console.log("mounted");
},
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
activated(){
console.log("activated");
},
deactivated(){
console.log("deactivated");
},
befoeUnmount(){
console.log("befoeUnmount");
},
unmounted(){
console.log("unmounted");
}
}
</script>Vue3 组合式生命周期函数
vue3 组合式 API 中附带了一个 setup() 方法，此方法封装了大多数组件代码，并处理了响应式、生命周期钩子函数等。其中生命周期函数与 vue2 的生命周期函数有了很大的不同，具体区别有：
- vue3 中增加 setup 函数，移除了 beforeCreate 和 created 函数。
- vue3 命名在 vue2 基础上加 'on' 前缀，以驼峰命名方式命名。
- 新增 onRenderTracked、onRenderTriggered 两个函数。
- 使用之前需要先导入，然后才能使用。
setup() 是在 beforeCreate 和 created 阶段执行的，所以在 setup 内不需要这两钩子函数，剩余生命函数执行都是一样的。
选项式 API | Hook inside setup |
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated |
deactivated | onDeactivated |
具体使用示例：
<script lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onErrorCaptured, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from "vue"
export default{
setup(){
let str = "sss"
onBeforeMount(()=>{
console.log("onBeforeMount");
})
onMounted(()=>{
console.log("onMounted");
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate");
})
onUpdated(()=>{
console.log("onUpdated");
})
onActivated(()=>{
console.log("onActivated");
})
onDeactivated(()=>{
console.log("onDeactivated");
})
onErrorCaptured(()=>{
console.log("onErrorCaptured");
})
onBeforeUnmount(()=>{
console.log("onBeforeUnmount");
})
onUnmounted(()=>{
console.log("onUnmounted");
})
onRenderTracked(()=>{
console.log("onRenderTracked");
debugger
})
onRenderTriggered(()=>{
console.log("onRenderTriggered");
debugger
})
return {
str
}
}
}
</script>onRenderTracked 和 onRenderTriggered 是用来调试的,这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。
Vue3 setup 语法糖生命周期函数
vue3 新增的 setup() 函数还有另外一种写法，可以直接将 setup 放到 script 内，可以大大简化上边的语法。
组件内容{{ str }}
<script lang="ts" setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onErrorCaptured, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from "vue"
let str = "sss"
onBeforeMount(()=>{
console.log("onBeforeMount");
})
onMounted(()=>{
console.log("onMounted",);
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate");
})
onUpdated(()=>{
console.log("onUpdated");
})
onActivated(()=>{
console.log("onActivated");
})
onDeactivated(()=>{
console.log("onDeactivated");
})
onErrorCaptured(()=>{
console.log("onErrorCaptured");
})
onBeforeUnmount(()=>{
console.log("onBeforeUnmount");
})
onUnmounted(()=>{
console.log("onUnmounted");
})
onRenderTracked((e)=>{
console.log("onRenderTracked",e);
debugger
})
onRenderTriggered(()=>{
console.log("onRenderTriggered");
debugger
})
</script>