Vue2与vue3之间生命周期的区别(分享)

vue2与vue3生命周期官网图解

之间的区别

• 在 Vue2 中，如果实例没有挂载，那么也会走 beforeCreate、created
• 在 Vue3 中，如果实例没有挂载，那么生命周期就不会走

生命周期的改变

• beforeDestroy ===> beforeUnmount
• destroyed ===> unmounted

组合式API中的生命周期

• 在 Vue3 中可以使用配置项生命周期，也可以使用组合式 API 中的生命周期
• 组合式 API 中生命周期的优先级，要高于配置项中的生命周期

import { 
  onBeforeMount,
  onMounted, 
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
}

// 没有初始化前和初始化完成
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 ---");
  });
},