＜script setup＞ 生命周期 API

<script setup> 生命周期 API

1. onBeforeMount 组件加载前时调用
2. onMounted 组件加载完成时调用
3. onBeforeUpdate 组件更新前时调用
4. onUpdated 组件更新完成时调用
5. onBeforeUnmount 组件卸载前时调用
6. onUnmounted 组件卸载完成时调用
7. onActivated 组件激活时时调用
8. onDeactivated 组件失活时时调用
9. onErrorCaptured 捕获到后代组件的错误时调用
10. onRenderTracked 状态跟踪
11. onRenderTriggered 状态触发
12. onServerPrefetch 服务器上被渲染之前调用

<script setup>
    import {
        onMounted, // 组件加载完成时调用
        onUpdated, // 组件更新完成时调用
        onUnmounted, // 组件卸载完成时调用
        onBeforeMount, // 组件加载前时调用
        onBeforeUpdate, // 组件更新前时调用
        onBeforeUnmount, // 组件卸载前时调用
        onActivated, // 组件激活时时调用
        onDeactivated, // 组件失活时时调用
        onErrorCaptured, // 捕获到后代组件的错误时调用
        onRenderTracked, // 状态跟踪，(组件更新时，跟踪组件里边每个值和方法的变化)
        onRenderTriggered, // 状态触发，(虚拟 DOM 重新渲染被触发时调用,此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键)
        onServerPrefetch, // 服务器上被渲染之前调用
    } from "vue";
    // 组件加载完成时调用
    onMounted(() => {
        console.log("组件加载完成");
    });

    // 组件更新完成时调用
    onUpdated(() => {
        console.log("组件更新完成");
    });

    // 组件卸载完成时调用
    onUnmounted(() => {
        console.log("组件卸载完成");
    });

    // 组件加载前时调用
    onBeforeMount(() => {
        console.log("组件加载前");
    });

    // 组件更新前时调用
    onBeforeUpdate(() => {
        console.log("组件更新前");
    });

    // 组件卸载前时调用
    onBeforeUnmount(() => {
        console.log("组件卸载前");
    });

    // 组件激活时调用
    onActivated(() => {
        console.log("组件激活");
    });

    // 组件失活时时调用
    onDeactivated(() => {
        console.log("组件失活");
    });

    // 捕获到后代组件的错误时调用
    onErrorCaptured((error) => {
        // error:错误提示
        console.log("捕获到后代组件的错误", error);
    });

    // 状态跟踪，(组件更新时，跟踪组件里边每个值和方法的变化)
    onRenderTracked((event) => {
        // 当页面有一个update的时候，会生成一个event对象，通过event对象查看代码/程序的问题所在
        console.log(event);
    });

    // 状态触发，(虚拟 DOM 重新渲染被触发时调用,此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键)
    onRenderTriggered((event) => {
        console.log(event);
    });

    //组件实例在服务器上被渲染之前调用（只能在SSR中用）
    onServerPrefetch(() => {
        console.log("onServerPrefetch");
    });
</script>