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)用(請求不宜過多,避免白屏時間太長)篙贸。
可以在這里結束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)的