Vue3的生命周期钩子函数，有能力的可以看官方示例：组合式 API：生命周期钩子 | Vue.js
在setup语法糖模式下，会少两个钩子函数：boforeCreated和created，这两个函数现在相当于用setup代替了，直接在setup里面写逻辑就可以了。
这里主要讲常用的6个钩子函数：onBeforeMount, onMounted, onBeforeUpdate, onUpdated，onBeforeUnmount, onUnmounted
其中onBeforeUnmount, onUnmounted需要引用组件来实现调用，在子组件里面添加，在父组件中使用v-if控制这个子组件的显示和消失，就可以了。
子组件代码：
<template>
<div>
这是关于页面的内容
</div>
</template>
<script setup lang='ts'>
import {onBeforeUnmount, onUnmounted } from 'vue'
// 组件销毁之前
onBeforeUnmount(() => {
console.log("组件销毁之前");
})
// 组件销毁之后
onUnmounted(() => {
console.log("组件销毁之后");
})
</script>
<style scoped>
</style>父组件代码：
<template>
<div>
<h2>Vue3的生命周期</h2>
<div>
<button @click="updateContent">点击更改组件内容</button>
<button @click="show">创建和销毁组件</button>
<div ref="demo">{
{ content }}</div>
<AboutMe v-if="display" ></AboutMe>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'
// import AboutMe from './views/AboutMe.vue'
import AboutMe from './views/AboutMe.vue'
console.log("setup语法糖模式中，可以直接在这里当做created函数使用");
const demo = ref<HTMLDivElement>()
const content = ref<string>("这是内容：div内容")
const display = ref<boolean>(true)
const updateContent = ()=>{
content.value = "div组价内容更新"
}
const show = ()=>{
display.value = !display.value
}
// 页面渲染之前
onBeforeMount(() => {
console.log("渲染之前", demo);
})
// 页面渲染之后
onMounted(() => {
console.log("渲染之后", demo);
})
// 组件更新之前
onBeforeUpdate(() => {
console.log("组件更新之前", demo);
})
// 组件更新之后
onUpdated(() => {
console.log("组件更新之后", demo);
})
</script>
<style scoped>
</style>