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的生命周期及其在不同版本中的变化，将帮助你更好地管理组件的状态和行为，提高开发效率。在面试中能清晰地解释这些概念，将使你更具竞争力！
)