vue3 生命周期函数（挂载、更新、销毁）

在这之前，相必用户也是用过vue2的经历，所以，在讲解之前先对vue2和vue3的生命周期进行对比：

Option API	组合API
beforeCreate	-setup
created	-setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated

通过表格对比可以看出：

1、vue3的生命周期就是在vue2的基础上前面增加（on）

2、vue3去除创建前后生命钩子，取而代之的为setup

3、销毁变了 onUnmounted , onBeforeUnmount

使用举例：

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup--创建前/后');

onBeforeMount(() => {
    console.log('onBeforeMount--挂载前')
})
onMounted(() => {
    console.log('onMounted--挂载后')
})
onBeforeUpdate(() => {
    console.log('onBeforeUpdate--更新前')
})
onUpdated(() => {
    console.log('onUpdated--更新后')
})
onBeforeUnmount(() => {
    console.log('onBeforeUnmount--销毁前')
})
onUnmounted(() => {
    console.log('onUnmounted--销毁后')
})
</script>

注：在vue3中，单个页面中一个生命函数可以多次使用