一、基本使用

组合式api生命周期几乎和选项式一致。注意组合式api是从挂载阶段开始

<template><div></div>
</template>
<script setup>
import {onBeforeMount, onMounted,onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,
} from 'vue'/*** 在挂载开始之前被调用：相关的 render 函数首次被调用。*/
onBeforeMount(() => {})/*** 组件挂载时调用*/
onMounted(() => {})/***  数据更新时调用，发生在虚拟 DOM 打补丁之前。* 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。*/
onBeforeUpdate(() => {})/*** 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子*/
onUpdated(() => {})/*** 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的*/
onBeforeUnmount(() => {})/***  卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，* 所有事件侦听器都被移除，所有子组件实例被卸载*/
onUnmounted(() => {})</script>

二、