Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
1. vue生命周期
一組件從 創(chuàng)建 到 銷毀 的整個(gè)過程就是生命周期
Vue 實(shí)例從創(chuàng)建到銷毀的過程,就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程,我們稱這是 Vue 的生命周期。
2.鉤子函數(shù)
Vue 框架內(nèi)置函數(shù),隨著組件的生命周期階段,自動執(zhí)行,特定的時(shí)間點(diǎn),執(zhí)行特定的操作
2.1 分為4大階段8個(gè)方法:
階段 | 方法名 | 方法名 |
初始化 | beforeCreated | created |
掛載 | beforeMount | Mounted |
更新 | beforeUpdate | updated |
銷毀 | beforeDestroy | destroyed |
下圖展示了實(shí)例的生命周期:
2.2 初始化階段
1.new Vue() – Vue實(shí)例化(組件也是一個(gè)小的Vue實(shí)例)
2.Init Events & Lifecycle – 初始化事件和生命周期函數(shù)
3.beforeCreate – 生命周期鉤子函數(shù)被執(zhí)行
4.Init injections&reactivity – Vue內(nèi)部添加data和methods等
5.created – 生命周期鉤子函數(shù)被執(zhí)行, 實(shí)例創(chuàng)建
6.接下來是編譯模板階段 –開始分析
7.Has el option? – 是否有el選項(xiàng) – 檢查要掛到哪里
沒有. 調(diào)用$mount()方法
有, 繼續(xù)檢查template選項(xiàng)
<script> export default { data(){ return { msg: "hello, Vue" } }, // 一. 初始化 // new Vue()以后, vue內(nèi)部給實(shí)例對象添加了一些屬性和方法, data和methods初始化"之前" beforeCreate(){ console.log("beforeCreate -- 執(zhí)行"); console.log(this.msg); // undefined }, // data和methods初始化以后 // 場景: 網(wǎng)絡(luò)請求, 注冊全局事件 created(){ console.log("created -- 執(zhí)行"); console.log(this.msg); // hello, Vue this.timer = setInterval(() => { console.log("哈哈哈"); }, 1000) } } </script>
2.3 掛載階段
1.template選項(xiàng)檢查
有 - 編譯template返回render渲染函數(shù)
無 – 編譯el選項(xiàng)對應(yīng)標(biāo)簽作為template(要渲染的模板)
2.虛擬DOM掛載成真實(shí)DOM之前
3.beforeMount – 生命周期鉤子函數(shù)被執(zhí)行
4.Create … – 把虛擬DOM和渲染的數(shù)據(jù)一并掛到真實(shí)DOM上
5.真實(shí)DOM掛載完畢
6.mounted – 生命周期鉤子函數(shù)被執(zhí)行
<template> <div> <p>學(xué)習(xí)生命周期 - 看控制臺打印</p> <p id="myP">{{ msg }}</p> </div> </template> <script> export default { // ...省略其他代碼 // 二. 掛載 // 真實(shí)DOM掛載之前 // 場景: 預(yù)處理data, 不會觸發(fā)updated鉤子函數(shù) beforeMount(){ console.log("beforeMount -- 執(zhí)行"); console.log(document.getElementById("myP")); // null this.msg = "重新值" }, // 真實(shí)DOM掛載以后 // 場景: 掛載后真實(shí)DOM mounted(){ console.log("mounted -- 執(zhí)行"); console.log(document.getElementById("myP")); // p } } </script>
2.4 更新階段
1.當(dāng)data里數(shù)據(jù)改變, 更新DOM之前
2.beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行
3.Virtual DOM…… – 虛擬DOM重新渲染, 打補(bǔ)丁到真實(shí)DOM
4.updated – 生命周期鉤子函數(shù)被執(zhí)行
5.當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個(gè)循環(huán)
<template> <div> <p>學(xué)習(xí)生命周期 - 看控制臺打印</p> <p id="myP">{{ msg }}</p> <ul id="myUL"> <li v-for="(val, index) in arr" :key="index"> {{ val }} </li> </ul> <button @click="arr.push(1000)">點(diǎn)擊末尾加值</button> </div> </template> <script> export default { data(){ return { msg: "hello, Vue", arr: [5, 8, 2, 1] } }, // 三. 更新 // 前提: data數(shù)據(jù)改變才執(zhí)行 // 更新之前 beforeUpdate(){ console.log("beforeUpdate -- 執(zhí)行"); console.log(document.querySelectorAll("#myUL>li")[4]); // undefined }, // 更新之后 // 場景: 獲取更新后的真實(shí)DOM updated(){ console.log("updated -- 執(zhí)行"); console.log(document.querySelectorAll("#myUL>li")[4]); // li } } </script>
2.5 銷毀階段
1.當(dāng)$destroy()被調(diào)用 – 比如組件DOM被移除(例v-if)
2.beforeDestroy – 生命周期鉤子函數(shù)被執(zhí)行
3.拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器
4.實(shí)例銷毀后, 最后觸發(fā)一個(gè)鉤子函數(shù)
5.destroyed – 生命周期鉤子函數(shù)被執(zhí)行
<script> export default { // ...省略其他代碼 // 四. 銷毀 // 前提: v-if="false" 銷毀Vue實(shí)例 // 場景: 移除全局事件, 移除當(dāng)前組件, 計(jì)時(shí)器, 定時(shí)器, eventBus移除事件$off方法 beforeDestroy(){ // console.log('beforeDestroy -- 執(zhí)行'); clearInterval(this.timer) }, destroyed(){ // console.log("destroyed -- 執(zhí)行"); } } </script>
最后:
面試題:
1.vue生命周期總共分為幾個(gè)階段?
(1) beforeCreate
在實(shí)例初始化之后,數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
(2) created
在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步,實(shí)例已完成以下的配置:數(shù)據(jù)觀測 (data observer), 屬性和方法的運(yùn)算,watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el 屬性目前不可見。
(3) beforeMount
在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。
(4) mounted
el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素,當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
(5) beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM,比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用,因?yàn)橹挥谐醮武秩緯诜?wù)端進(jìn)行。
(6) updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會調(diào)用該鉤子。
(7) activated
keep-alive 組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
(8) deactivated
keep-alive 組件停用時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
(9) beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
(10) destroyed
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實(shí)例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
(11) errorCaptured(2.5.0+ 新增)
當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會收到三個(gè)參數(shù):錯(cuò)誤對象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。
2.第一次加載頁面會觸發(fā)哪幾個(gè)鉤子函數(shù)?
beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子函數(shù)
總結(jié)
到此這篇關(guān)于Vue生命周期和鉤子函數(shù)的文章就介紹到這了,更多相關(guān)Vue生命周期和鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中transition組件在項(xiàng)目中運(yùn)用小結(jié)
這篇文章主要介紹了vue中transition組件在項(xiàng)目中運(yùn)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法
下面小編就為大家分享一篇webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03使用webpack搭建vue項(xiàng)目及注意事項(xiàng)
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目的方法,本文以開發(fā)環(huán)境為例,通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07vue實(shí)現(xiàn)消息的無縫滾動效果的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)消息的無縫滾動效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12Vue項(xiàng)目WebPack打包刪除注釋和console
這篇文章主要介紹了Vue項(xiàng)目WebPack打包刪除注釋和console,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04如何解決element-ui動態(tài)加載級聯(lián)選擇器默認(rèn)選中問題
這篇文章主要介紹了如何解決element-ui動態(tài)加載級聯(lián)選擇器默認(rèn)選中問題,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09