vue生命周期

  1. 什么是vue生命周期?
    Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程,就是生命周期。也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列的過(guò)程,我們稱這是 Vue 的生命周期。
  2. 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í)更容易形成好的邏輯。
  3. 第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子?
    beforeCreate , created , beforeMount ,mounted 這幾個(gè)鉤子
  4. 簡(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ú)法操作里面的任何東西了。
  5. 父子組件的生命周期
    執(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)的

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容