Vue3 生命周期 - 2024最新版前端秋招面试短期突击面试题【100道】

Vue3 生命周期 - 2024最新版前端秋招面试短期突击面试题【100道】 🔄

在Vue.js中，生命周期钩子是组件从创建到销毁过程中的一系列事件。理解Vue的生命周期对于掌握组件的行为和调试至关重要。Vue 3引入了Composition API，改变了生命周期函数的使用方式。以下是关于Vue 2和Vue 3生命周期的详细解释。

Vue 2 生命周期钩子 🌱

在Vue 2中，组件生命周期包括多个钩子函数，主要有：

beforeCreate：实例刚被创建，数据还未初始化。
created：实例创建完成，数据已初始化。
beforeMount：模板渲染前，DOM还未挂载。
mounted：实例已挂载，DOM已渲染。
beforeUpdate：数据更新前。
updated：数据更新后，DOM已更新。
beforeDestroy：实例销毁前。
destroyed：实例已销毁。

示例代码（Vue 2）

new Vue({el: '#app',data() {return {msg: 'Hello Vue!'};},beforeCreate() {console.log("beforeCreate,挂载了vue实例的方法，但是data没有挂载", this.msg);},created() {console.log("created,挂载了data", this.msg);},beforeMount() {console.log("data没有渲染到了页面", document.getElementById("app").innerHTML);},mounted() {console.log("mounted data渲染到了页面", document.getElementById("app").innerHTML);},beforeUpdate() {console.log("beforeUpdate数据更改导致DOM更改之前", document.getElementById("app").innerHTML);},updated() {console.log("updated数据更改导致DOM更改之后", document.getElementById("app").innerHTML);},beforeDestroy() {console.log("beforeDestroy");},destroyed() {console.log("destroyed");}
});

Vue 3 生命周期钩子 🌳

在Vue 3中，使用Composition API，生命周期钩子的使用方式发生了变化。以下是与Vue 2对应的生命周期钩子：

onBeforeMount：组件渲染前。
onMounted：组件已挂载。
onBeforeUpdate：组件更新前。
onUpdated：组件更新后。
onBeforeUnmount：组件卸载前。
onUnmounted：组件已卸载。

示例代码（Vue 3）

const { createApp, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } = Vue;const app = createApp({setup() {const msg = ref("你好11111111111");console.log("1");onBeforeMount(() => {console.log("onBeforeMount data没有渲染到了页面", document.getElementById("app").innerHTML);});onMounted(() => {console.log("onMounted data渲染到了页面", document.getElementById("app").innerHTML);setTimeout(() => {msg.value = "hello";}, 1000);});onBeforeUpdate(() => {console.log("onBeforeUpdate");});onUpdated(() => {console.log("onUpdated");});onBeforeUnmount(() => {console.log("onBeforeUnmount");});onUnmounted(() => {console.log("onUnmounted");});return { msg };}
});app.mount('#app');