vue生命週期的理解

2021-10-01 17:16:57 字數 1543 閱讀 7826

vue的生命週期是vue例項從建立到銷毀的過程,在生命週期的不同階段對應的鉤子函式實現元件的資料管理和dom渲染兩大重要功能

vue生命週期又分為8個階段:

beforecreate[建立前]

例項初始化之後,此時資料觀測和初始化事件還未開始,不能獲取dom節點
created[建立後]

vue例項已經建立;資料觀察,屬性和 方法配置完成,但是$el不可用
beforemount[載入前]

在掛載之前呼叫: 相關的`render`函式(模板)首次被呼叫, 完成編譯模板, `data`裡面的資料和模板生成`html`。注意此時還沒有掛載`html`到頁面上,但是`vue`掛載的根節點已經建立
mounted[載入後]

`el`被新建立的`vm.$el`替換,並掛載到例項上去之後呼叫該鉤子(資料和dom都已經渲染結束)
beforeupdate[更新前]

vue遵循資料驅動dom的原則;當vue的任何資料,都會觸發該函式,此鉤子函式在伺服器端渲染期間不被呼叫
updated[更新後]

此階段dom會和更改過的內容同步; 所以應該避免在此階段更改狀態,防止死迴圈
beforedestroy[銷毀前]

例項銷毀前,例項仍然完全可用
destroyed[銷毀後]

vue 所有的事件***會被移除,所有的子例項也會被銷毀。該鉤子在伺服器端渲染期間不被呼叫
精準的控制資料流及其對dom的影響

beforecreatecreatedbeforemountmounted

created進行資料非同步獲取, 初始化資料

mounted掛載dom節點元素的獲取

nexttick針對單一的事件更新資料後立即操作dom

updated任何資料的更新,如果要做統一的業務邏輯處理使用此鉤子函式

watch監聽資料變化,並做相關業務處理

created: 在模板渲染成html前呼叫,通常初始化某些屬性,然後渲染成檢視

mounted:在模板渲染成html後呼叫,通常是初始化頁面之後,再對htmldom節點進行一些需要的操作

一般放在created鉤子函式中,因為此時資料data方法methods均已初始化完成

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

Vue 生命週期的理解

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖 這些圖是網路的,侵權必刪beforecreate 元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做 新增一些行為此時的this,並不會指向例項物件 ...

vue生命週期的理解

vue有乙個完整的生命週期,是指從開始建立,初始化資料,編譯模板,掛載dom,渲染更新,銷毀一系列過程,我們稱這是vue的生命週期。通俗的講 vue的例項從建立到銷毀的過程就是vue的生命週期,同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己 的機會 beforec...