1. 生命周期函數(shù)面試題
1. 什么是vue生命周期?
Vue 實例從創(chuàng)建到銷毀的過程,就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列的過程,我們稱這是 Vue 的生命周期。
2. vue生命周期的作用是什么
Vue 所有的功能的實現(xiàn)都是圍繞其生命周期進行的,在生命周期的不同階段調(diào)用對應的鉤子函數(shù)可以實現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。
生命周期中有多個事件鉤子,在控制整個vue實例的過程時更容易形成好的邏輯。
3. 第一次頁面加載會觸發(fā)哪幾個鉤子?
beforeCreate , created , beforeMount ,mounted 這幾個鉤子
4. 簡述每個周期具體適合哪些場景?
-
beforeCreate:創(chuàng)建前,此階段為實例初始化之后,this指向創(chuàng)建的實例,此時的數(shù)據(jù)觀察事件機制都未形成,不能獲得DOM節(jié)點。
data,computed,watch,methods 上的方法和數(shù)據(jù)均不能訪問。
可以在這加個loading事件。
-
created:創(chuàng)建后,此階段為實例已經(jīng)創(chuàng)建,完成數(shù)據(jù)(data、props、computed)的初始化導入依賴項。
可訪問 data computed watch methods 上的方法和數(shù)據(jù)。
初始化完成時的事件寫在這里,異步請求也適宜在這里調(diào)用(請求不宜過多,避免白屏時間太長)。
可以在這里結(jié)束loading事件,還做一些初始化,實現(xiàn)函數(shù)自執(zhí)行。
未掛載DOM,若在此階段進行DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。
-
beforeMount:掛載前,雖然得不到具體的DOM元素,但vue掛載的根節(jié)點已經(jīng)創(chuàng)建,下面vue對DOM的操作將圍繞這個根元素繼續(xù)進行。
beforeMount這個階段是過渡性的,一般一個項目只能用到一兩次。
-
mounted:掛載,完成創(chuàng)建vm.$el,和雙向綁定
完成掛載DOM和渲染,可在mounted鉤子函數(shù)中對掛載的DOM進行操作。
可在這發(fā)起后端請求,拿回數(shù)據(jù),配合路由鉤子做一些事情。
-
beforeUpdate:數(shù)據(jù)更新前,數(shù)據(jù)驅(qū)動DOM。
在數(shù)據(jù)更新后雖然沒有立即更新數(shù)據(jù),但是DOM中的數(shù)據(jù)會改變,這是vue雙向數(shù)據(jù)綁定的作用。
可在更新前訪問現(xiàn)有的DOM,如手動移出添加的事件監(jiān)聽器。
-
updated:數(shù)據(jù)更新后,完成虛擬DOM的重新渲染和打補丁。
組件DOM已完成更新,可執(zhí)行依賴的DOM操作。
注意:不要在此函數(shù)中操作數(shù)據(jù)(修改屬性),會陷入死循環(huán)。
-
activated:在使用vue-router時有時需要使用
<keep-alive></keep-alive>來緩存組件狀態(tài),這個時候created鉤子就不會被重復調(diào)用了。如果我們的子組件需要在每次加載的時候進行某些操作,可以使用activated鉤子觸發(fā)。
deactivated:
<keep-alive></keep-alive>組件被移除時使用。-
beforeDestroy:銷毀前,
可做一些刪除提示,如:您確定刪除xx嗎?
-
destroyed:銷毀后,當前組件已被刪除,銷毀監(jiān)聽事件,組件、事件、子實例也被銷毀。
這時組件已經(jīng)沒有了,無法操作里面的任何東西了。
5. 父子組件的生命周期
- 執(zhí)行順序:
- 父組件開始執(zhí)行到beforeMount 然后開始子組件執(zhí)行,最后是父組件mounted。
- 如果有兄弟組件,父組件開始執(zhí)行到beforeMount,然后兄弟組件依次執(zhí)行到beforeMount,然后按照順序執(zhí)行mounted,最后執(zhí)行父組件的mounted。
- 當子組件掛載完成后,父組件才會掛載。
- 當子組件完成掛在后,父組件會主動執(zhí)行一次beforeUpdated/updated鉤子函數(shù)(僅首次)
- 父子組件在data變化中是分別監(jiān)控的,但是更新props中的數(shù)據(jù)是關聯(lián)的。
- 銷毀父組件時,先將子組件銷毀后才會銷毀父組件。
- 兄弟組件的初始化(mounted之前)是分開進行,掛載是從上到下依次進行
- 當沒有數(shù)據(jù)關聯(lián)時,兄弟組件之間的更新和銷毀是互不關聯(lián)的