技術標籤：vue3vue

生命週期比較

vue2 中 執行順序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyed
vue3 中 執行順序 setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted
對應關係
vue2->vue3

beforeCreate

其中 vue3中的setup相當於vue2中beforeCreate 與created 但是的執行在beforeCreate 與created之前，所以setup無法使用 data 和 methods 中的資料和方法,即無法操作this

簡單例子說明

父元件App.vue

<template>
  <h1>App父級元件</h1>
  <button @click="childShow = !childShow"
 
>切換child子元件的顯示</button>
  <hr />
  <child v-if="childShow" />
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
//引入子元件
import child from "./components/child.vue";
export default defineComponent({
  name: "App",
  components: {
    child,
  },

  setup() {

    const childShow = ref(true);

    return {
      childShow,
    };
  },
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

子元件child.vue

<template>
  <h2>child 子級元件</h2>
  <h3>{{ name }}</h3>
  <button @click="updateName">更新name</button>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
} from "vue";

export default defineComponent({
  name: "child",
  //vue2中的生命週期鉤子
  beforeCreate() {
    console.log("vue2 中的生命週期 beforeCreate");
  },
  created() {
    console.log("vue2 中的生命週期 created");
  },
  beforeMount() {
    console.log("vue2 中的生命週期 beforeMount");
  },
  mounted() {
    console.log("vue2 中的生命週期 mounted");
  },
  beforeUpdate() {
    console.log("vue2 中的生命週期 beforeUpdate");
  },
  updated() {
    console.log("vue2 中的生命週期 updated");
  },
  // vue2中的 beforeDestroy與 destroyed已經改名 無法使用
  beforeUnmount() {
    console.log("vue2 中的生命週期 beforeDestroy(beforeUnmount)");
  },
  unmounted() {
    console.log("vue2 中的生命週期 destroyed(unmounted)");
  },
  setup() {
    console.log("vue3中的setup");
    const name = ref("hhh");
    const updateName = () => {
      name.value += "6……6………6";
    };
    onBeforeMount(() => {
      console.log("vue3 中的生命週期 onBeforeMount");
    });
    onMounted(() => {
      console.log("vue3 中的生命週期 onMounted");
    });
    onBeforeUpdate(() => {
      console.log("vue3 中的生命週期 onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("vue3 中的生命週期 onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("vue3 中的生命週期 onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("vue3 中的生命週期 onUnmounted");
    });
    return {
      name,
      updateName,
    };
  },
});
</script>

執行起來的顯示效果

進入頁面 按f12 開啟除錯 重新整理頁面

可以看出vue3中，
setup執行在beforeCreate與created前面；
onBeforeMount執行在beforeMount前面；
onMounted執行在mounted前面；

點選 更新name

可以看出vue3中，
onBeforeUpdate執行在beforeUpdate前面；
onUpdated執行在updated前面；
點選 切換child子元件的顯示

可以看出vue3中，
onBeforeUnmount執行在beforeDestroy前面；
onUnmounted執行在destroyed前面；