天天看點

vue生命周期

Vue執行個體有一個完整的生命周期,也就是從開始建立、初始化資料、編譯模闆、挂載Dom、渲染→更新→渲染、銷毀等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue執行個體從建立到銷毀的過程,就是生命周期。

每一個元件或者執行個體都會經曆一個完整的生命周期,總共分為三個階段:初始化、運作中、銷毀。

執行個體、元件通過new Vue() 建立出來之後會初始化事件和生命周期,然後就會執行beforeCreate鈎子函數,這個時候,資料還沒有挂載呢,隻是一個空殼,無法通路到資料和真實的dom,一般不做操作

挂載資料,綁定事件等等,然後執行created函數,這個時候已經可以使用到資料,也可以更改資料,在這裡更改資料不會觸發updated函數,在這裡可以在渲染前倒數第二次更改資料的機會,不會觸發其他的鈎子函數,一般可以在這裡做初始資料的擷取

接下來開始找執行個體或者元件對應的模闆,編譯模闆為虛拟dom放入到render函數中準備渲染,然後執行beforeMount鈎子函數,在這個函數中虛拟dom已經建立完成,馬上就要渲染,在這裡也可以更改資料,不會觸發updated,在這裡可以在渲染前最後一次更改資料的機會,不會觸發其他的鈎子函數,一般可以在這裡做初始資料的擷取

接下來開始render,渲染出真實dom,然後執行mounted鈎子函數,此時,元件已經出現在頁面中,資料、真實dom都已經處理好了,事件都已經挂載好了,可以在這裡操作真實dom等事情...

當元件或執行個體的資料更改之後,會立即執行beforeUpdate,然後vue的虛拟dom機制會重新建構虛拟dom與上一次的虛拟dom樹利用diff算法進行對比之後重新渲染,一般不做什麼事兒

當更新完成後,執行updated,資料已經更改完成,dom也重新render完成,可以操作更新後的虛拟dom

當經過某種途徑調用$destroy方法後,立即執行beforeDestroy,一般在這裡做一些善後工作,例如清除計時器、清除非指令綁定的事件等等

元件的資料綁定、監聽...去掉後隻剩下dom空殼,這個時候,執行destroyed,在這裡做善後工作也可以