生命周期

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

11、onRenderTracked() 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。

12、onRenderTriggered()注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。

<script setup>
    import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount,
    onUnmounted, onRenderTracked, onRenderTriggered} from "vue";

    onBeforeMount(() => { console.log('挂载前的钩子')})

    onMounted(() => { console.log('挂载后的钩子') })

    onBeforeUpdate(() =>{ console.log('更新前的钩子') })

    onUpdated(() =>{ console.log('更新后的钩子') })

    onBeforeUnmount(() =>{ console.log('组件卸载之前') })

    onUnmounted(() =>{ console.log('组件卸载完成后') })

    //仅在开发模式下可用的调试钩子
    onRenderTracked(() =>{ console.log('渲染过程中追踪到响应式依赖时调用') })

    onRenderTriggered(() =>{ console.log('更新时依赖时调用') })
</script>