凡科建站弊端,各学院二级网站建设通报,视频网站开发php,wordpress ip验证不当Vue3 生命周期 - 2024最新版前端秋招面试短期突击面试题【100道】 #x1f504;
在Vue.js中#xff0c;生命周期钩子是组件从创建到销毁过程中的一系列事件。理解Vue的生命周期对于掌握组件的行为和调试至关重要。Vue 3引入了Composition API#xff0c;改变了生命周期函数…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的生命周期及其在不同版本中的变化将帮助你更好地管理组件的状态和行为提高开发效率。在面试中能清晰地解释这些概念将使你更具竞争力
