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');
总结 📖
Vue 2 生命周期钩子
- beforeCreate 和 created：用于初始化。
- beforeMount 和 mounted：用于处理DOM操作。
- beforeUpdate 和 updated：用于响应数据变化。
- beforeDestroy 和 destroyed：用于清理工作。
Vue 3 生命周期钩子
- 引入了
setup函数，钩子的使用方式变为函数调用，提升了灵活性。 - 移除了
beforeCreate和created，用setup替代。 destroy改为了unmount，使得语义更加明确。
理解Vue的生命周期及其在不同版本中的变化，将帮助你更好地管理组件的状态和行为，提高开发效率。在面试中能清晰地解释这些概念，将使你更具竞争力！