Vue3 生命周期

• 对比 Vue2 生命周期

  • 执行流程变化:
    • vue2 中不配置 el 配置项时，会执行 beforeCreate 和 created 这两个生命周期，执行到 beforeMount 时，因为没有配置 el 项，停止向下执行
    • vue3 中必须先执行 createApp 函数，才会向下执行生命周期
  • 生命周期名称变化:
    • beforeDestroy 变为----> beforeUnmount
    • destroyed 变为----> unmounted
    • 执行顺序未改变

• 生命周期执行顺序

  • setup( ) { } ( 补充 )
  • beforeCreate( ) { }
  • created( ) { }
  • beforeMount( ) { }
  • mounted( ) { }
  • beforeUpdate( ) { }
  • updated( ) { }
  • beforeUnmount( ) { }
  • unmounted( ) { }

• 配置项形式 使用生命周期

  export default {
    setup() {},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
  };
  

• 组合式 API 使用生命周期

  使用组合式 API 时，setup 配置项相当于 beforeCreate、created 这两个生命周期

  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
  } from "vue";
  export default {
    setup() {
      onBeforeMount(() => {});
      onMounted(() => {});
      onBeforeUpdate(() => {});
      onUpdated(() => {});
      onBeforeUnmount(() => {});
      onUnmounted(() => {});
    },
  };
  

  除了 beforeCreate、created 是在 setup 之后执行，所有的组合式 API 形式的生命周期，都会在配置项形式的生命周期之前执行。