生命周期：
vue2中的生命周期：
- 创建阶段：beforeCreate、created
- 挂载阶段：beforeMount、mounted
- 更新阶段：beforeUpdate、updated
- 销毁阶段：beforeDestroy、destroyed
详细介绍:
-
beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前调用。此时无法访问到 data、computed 和 watch 等属性。
-
created：在实例创建完成后被立即调用。此时可以访问到 data、computed 和 watch 等属性，但还未挂载到 DOM 上。
-
beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用。
-
mounted：实例被挂载后调用，此时组件已经在 DOM 中渲染完成。可以访问到 DOM 元素。
-
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
-
updated：组件更新完成后调用，此时虚拟 DOM 已重新渲染并应用补丁。
-
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
-
destroyed：实例销毁后调用，此时所有的事件监听器被移除，所有的子实例也被销毁。
Vue3的生命周期：
- 创建阶段：setup
- 挂载阶段：onBeforeMount、onMounted
- 更新阶段：onBeforeUpdate,onUpdated
- 卸载阶段：onBeforeUnmount,onUnmounted
详细介绍：
-
setup()：在 Vue 3 中，setup() 函数取代了 beforeCreate 和 created。在 setup() 函数中，可以定义响应式数据和方法，并返回需要在模板中使用的数据和方法。
-
onBeforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
-
onMounted：实例被挂载后调用，此时组件已经在 DOM 中渲染完成。可以访问到 DOM 元素。
-
onBeforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
-
onUpdated：组件更新完成后调用，此时虚拟 DOM 已重新渲染并应用补丁。
-
onBeforeUnmount：在卸载组件之前调用。
-
onUnmounted：组件卸载后调用。
常用的钩子：onMounted(挂在完毕)、onUpdated(更新完毕)、onBeforeUnmounted(卸载之前)
使用的时候，需要将其导入到script标签中：
例如：
<template>
<div class="divBox">
<h2>功德箱：{{ sum }}</h2>
<button @click="sum++">敲击</button>
</div>
</template>
<script setup name="lifeCycle" lang="ts">
import { onBeforeMount, ref,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
//数据
let sum = ref(0);
//方法
// function add() {
// sum.value++;
// }
//创建
console.log("创建~");
//挂载前
onBeforeMount(()=>{
console.log("挂载前~");
})
//挂载完毕
onMounted(()=>{
console.log("子---挂载完毕~");
})
//更新前
onBeforeUpdate(()=>{
console.log("更新前~");
})
//更新完毕
onUpdated(()=>{
console.log("更新完毕~");
})
//卸载前
onBeforeUnmount(()=>{
console.log("卸载前~");
})
//卸载完毕
onUnmounted(()=>{
console.log("卸载完毕~");
})
</script>
<style scoped>
@import "/src/Css/divBox.css";
</style>
