vue3.0生命周期

生命周期

使用前需引入

    
    import {
      onBeforeMount,
      onMounted,
      onBeforeUpdate,
      onUpdated,
      onBeforeUnmount,
      onUnmounted,
      onActivated,
      onDeactivated,
      onErrorCaptured,
      onRenderTracked,
      onRenderTriggered
    } from "vue";

    // setup可以代替初始化之前和初始化之后

    // onBeforeMount(() => {
    //   // 组件挂载前
    //   console.log("组件挂载前--》onBeforeMount");
    // });

    // onMounted(() => {
    //   // 组件挂载后
    //   console.log("组件挂载后--onMounted");
    // });

    // onBeforeUpdate(() => {
    //   // 组件跟新后之前
    //   console.log("组件跟新后之前-onBeforeUpdate");
    // });

    // onUpdated(() => {
    //   // 组件跟新之后
    //   console.log("组件跟新之后--onUpdated");
    // });

    // onBeforeUnmount(() => {
    //   // 组件销毁之前
    //   console.log("组件销毁之前--onBeforeUnmount");
    // });
    // onUnmounted(() => {
    //   // 组件销毁之后
    //   console.log("组件销毁之后--onUnmounted");
    // });
    // onActivated(() => {
    //   // 跟<keep-alive></keey-alive>配合使用
    //   // 组件活跃时触发
    // });

    // onDeactivated(() => {
    //   // 跟<keep-alive></keey-alive>配合使用
    //   // 组件不活跃时触发
    // });

    // onErrorCaptured(() => {
    //   // 捕获子组件异常时触发的函数
    // });

    // onRenderTracked((event) => {
    //   // 响应式跟踪(所有响应式状态)（数据状态包括定义的数组的length以及数组里的每个值）
    //   console.log("状态跟踪钩子函数------->>>>>>>>");
    //   console.log(event);
    // });
    // onRenderTriggered((event) => {
    //   // 单个响应式跟踪
    //   console.log("单个状态跟踪钩子函数-->>>>>>>>");
    //   console.log(event);
    // });