Vue3-生命周期

vue2与vue3生命周期对比

左边是vue3右边是vue2，对比两图我们发现

• vue创建方式由new Vue()， 更改为 Vue.createApp(oprions).mount(el)。在vue3中先将配置项传入，一切准备就绪后再开始创建实例。
• 生命周期 beforeDestroy改为 beforeUnmount
• 生命周期 destroyed改为 unmounted

还有一个小细节，vue3生命周期的图片从png改成了svg格式，存储占用从48kb下降到了8kb

在setup组合式api中使用生命周期

• 在setup中没有beforeCreate和 created生命周期
• 所有生命周期前需要加on

<template>
<div></div>
</template>

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

export default {
  name: "Demo",
  setup() {
    console.log("setup");
    // 通过组合式api方式使用生命周期
    onBeforeMount(() => {
      console.log("---onBeforeMount---");
    })
    onMounted(() => {
      console.log("---onMounted---");
    })
    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---");
    })
    onUpdated(() => {
      console.log("---onUpdated---");
    })
    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---");
    })
    onUnmounted(() => {
      console.log("---onUnmounted---");
    })
    return {
      sum
    };
  }
};
</script>

同时在配置项和setup中使用生命周期的调用顺序

可以看到

首先调用setup内容
通过配置项使用生命周期在setup内使用生命周期之前调用

尽量不要同时在配置项和setup函数内使用生命周期，以免造成混乱。