vue3生命周期详解（setup语法糖生命周期函数）

vue3 生命周期函数，就是在组件运行的某一条件下会被自动触发的函数。

1、Vue3 选项式生命周期函数

vue3 新增组合式 API ，同时也能够支持选项式 API。使用选项式 API 写法时，生命周期函数与 vue2 得一模一样：

<template>
<div>
<slot></slot>
</div>
</template>

<script>
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>

2、Vue3 组合式生命周期函数

vue3 组合式 API 中附带了一个 setup() 方法，此方法封装了大多数组件代码，并处理了响应式、生命周期钩子函数等。其中生命周期函数与 vue2 的生命周期函数有了很大的不同，具体区别有：

• vue3 中增加 setup 函数，移除了 beforeCreate 和 created 函数。

• vue3 命名在 vue2 基础上加 'on' 前缀，以驼峰命名方式命名。

• 新增 onRenderTracked、onRenderTriggered 两个函数。

• 使用之前需要先导入，然后才能使用。

setup() 是在 beforeCreate 和 created 阶段执行的，所以在 setup 内不需要这两钩子函数，剩余生命函数执行都是一样的。

<template>
<div>
组件内容{{ str }}
</div>
</template>

<script>
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 内，可以大大简化上边的语法。

<template>
<div>
组件内容{{ str }}
</div>
</template>
<script 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>