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