官方文檔：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html **** :-:  Vue3生命周期示意圖 **1. Vue3.x 版本與 Vue2.x 版本生命周期相對應的組合式 API** * `beforeCreate`\-> 使用`setup()` * `created`\-> 使用`setup()` * `beforeMount`\->`onBeforeMount` * `mounted`\->`onMounted` * `beforeUpdate`\->`onBeforeUpdate` * `updated`\->`onUpdated` * `beforeDestroy`\->`onBeforeUnmount` * `destroyed`\->`onUnmounted` * `errorCaptured`\->`onErrorCaptured` * Vue3.x 新增了兩個調式的鉤子函數 * onRenderTracked * onRenderTriggered 在 Vue3.x 版本中，Vue2.x 版本中的生命周期鉤子函數`beforeCreate`、`created`均由`setup`替代，其它的添加了前綴`on`進行重命名。 <br/> **2. 下面在 vue2.x 演示生命周期每個階段的狀態** ```html <template> <div> <h1>子組件</h1> <h3 id="h3">msg: {{ msg }}</h3> <button @click="updateMsg">更新msg</button> </div> </template> <script> export default { data() { return { msg: "生命周期函數", }; }, methods: { updateMsg() { this.msg = "張三"; }, printLog() { console.log("printLog"); }, }, //1. 到這個函數的時間點，還不能調用data和methods中的數據 beforeCreate() { console.log(this.msg); //undefined }, //2. 到這個函數的時間點，可以調用data和methods中的數據了 created() { console.log(this.msg); //生命周期函數 this.printLog(); //printLog }, //3. 到這個函數的時間點，還不能拿到HTML頁面元素 beforeMount() { console.log(document.getElementById("h3")); //null }, //4. 到這個函數的時間點，可以拿到HTML頁面中元素了 mounted() { console.log(document.getElementById("h3").innerText); //msg: 生命周期函數 }, //5. 到這個函數的時間點，只是在內存更新了數據，尚未同步到HTML頁面中 beforeUpdate() { console.log(document.getElementById("h3").innerText); //msg: 生命周期函數 console.log(this.msg); //張三 }, //6. 到這個函數的時間點，數據更新完畢并同步到HTML頁面中了 updated() { console.log(document.getElementById("h3").innerText); //msg: 張三 console.log(this.msg); //張三 }, //7. 準備銷毀vue對象 beforeDestroy() { console.log(this.msg); //張三 }, //8. 已經銷毀vue對象，但是數據依然可以訪問 destroyed() { console.log(this.msg); //張三 }, }; </script> ``` <br/> **3. 在 Vue3.x 中使用 Vue2.x 的鉤子函數 與 Vue3.x 的鉤子函數** 在 Vue3.x 中依然兼容 Vue2.x 的鉤子函數。 ```html <script lang="ts"> import { defineComponent, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, } from "vue"; export default defineComponent({ setup() { const msg = ref("abc"); const update = () => { msg.value += "++"; }; /* vue3.x 生命周期鉤子函數 */ console.log("vue3.x -> setup"); onBeforeMount(() => { console.log("vue3.x -> onBeforeMount"); }); onMounted(() => { console.log("vue3.x -> onMounted"); }); onBeforeUpdate(() => { console.log("vue3.x -> onBeforeUpdate"); }); onUpdated(() => { console.log("vue3.x -> onUpdated"); }); onBeforeUnmount(() => { console.log("vue3.x -> onBeforeUnmount"); }); onUnmounted(() => { console.log("vue3.x -> onUnmounted"); }); return { msg, update, }; }, /* vue2.x 生命周期鉤子函數 */ beforeCreate() { console.log("vue2.x -> beforeCreate"); }, created() { console.log("vue2.x -> created"); }, beforeMount() { console.log("vue2.x -> beforeMount"); }, mounted() { console.log("vue2.x -> mounted"); }, beforeUpdate() { console.log("vue2.x -> beforeUpdate"); }, updated() { console.log("vue2.x -> updated"); }, beforeUnmount() { console.log("vue2.x -> beforeUnmount"); }, unmounted() { console.log("vue2.x -> unmounted"); }, }); </script> ``` 控制臺打印順序如下： ``` vue3.x -> setup vue2.x -> beforeCreate vue2.x -> created vue3.x -> onBeforeMount vue2.x -> beforeMount vue3.x -> onMounted vue2.x -> mounted vue3.x -> onBeforeUpdate vue2.x -> beforeUpdate vue3.x -> onUpdated vue2.x -> updated vue3.x -> onBeforeUnmount vue2.x -> beforeUnmount vue3.x -> onUnmounted vue2.x -> unmounted ``` 可見如果混用 Vue2.x 與 Vue3.x 生命周期鉤子函數，則同階段的鉤子函數 Vue3.x 的先執行。