官方文档：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 的先执行。