vue生命周期詳解

Vue實(shí)例有一個(gè)完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程,就是生命周期。

每一個(gè)組件或者實(shí)例都會(huì)經(jīng)歷一個(gè)完整的生命周期,總共分為三個(gè)階段:初始化、運(yùn)行中、銷毀。

1.實(shí)例、組件通過new Vue() 創(chuàng)建出來之后會(huì)初始化事件和生命周期,然后就會(huì)執(zhí)行beforeCreate鉤子函數(shù),這個(gè)時(shí)候,數(shù)據(jù)還沒有掛載呢,只是一個(gè)空殼,無法訪問到數(shù)據(jù)和真實(shí)的dom,一般不做操作

2.掛載數(shù)據(jù),綁定事件等等,然后執(zhí)行created函數(shù),這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù),也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù),在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機(jī)會(huì),不會(huì)觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取

3.接下來開始找實(shí)例或者組件對(duì)應(yīng)的模板,編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染,然后執(zhí)行beforeMount鉤子函數(shù),在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成,馬上就要渲染,在這里也可以更改數(shù)據(jù),不會(huì)觸發(fā)updated,在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì),不會(huì)觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取

4.接下來開始render,渲染出真實(shí)dom,然后執(zhí)行mounted鉤子函數(shù),此時(shí),組件已經(jīng)出現(xiàn)在頁(yè)面中,數(shù)據(jù)、真實(shí)dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了,可以在這里操作真實(shí)dom等事情...

5.當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后,會(huì)立即執(zhí)行beforeUpdate,然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進(jìn)行對(duì)比之后重新渲染,一般不做什么事兒

6.當(dāng)更新完成后,執(zhí)行updated,數(shù)據(jù)已經(jīng)更改完成,dom也重新render完成,可以操作更新后的虛擬dom

7.當(dāng)經(jīng)過某種途徑調(diào)用$destroy方法后,立即執(zhí)行beforeDestroy,一般在這里做一些善后工作,例如清除計(jì)時(shí)器、清除非指令綁定的事件等等

8.組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼,這個(gè)時(shí)候,執(zhí)行destroyed,在這里做善后工作也可以

最后編輯于
?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 詳解Vue Lifecycle 先來看看vue官網(wǎng)對(duì)vue生命周期的介紹 Vue實(shí)例有一個(gè)完整的生命周期,也就是從...
    雪妮爸爸閱讀 3,133評(píng)論 0 0
  • 1.vue基本生命周期 vue源碼中最終執(zhí)行生命周期函數(shù)都是調(diào)用callHook方法,callHook函數(shù)的邏輯很...
    WHU_GIS_LJ閱讀 19,735評(píng)論 0 13
  • Vue實(shí)例有一個(gè)完整的生命周期,也就是說從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛在DOM、渲染-更新-渲染、卸載等一系...
    前端_周瑾閱讀 296,933評(píng)論 9 140
  • Vue生命周期 每個(gè)Vue實(shí)例被創(chuàng)建時(shí)都要經(jīng)過一系列得初始化過程,舉一把栗子:需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯、模板、將實(shí)例...
    前端_周瑾閱讀 1,807評(píng)論 0 2
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,175評(píng)論 0 29

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