1. 程式人生 > >Vue中對生命周期的理解

Vue中對生命周期的理解

利用 沒有 等等 圖片 例如 鉤子函數 mount des pan

      Vue中對生命周期的理解

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

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

3. 接下來開始找實例或者組件對應的模板,編譯模板為虛擬dom放入到render(渲染)函數中準備渲染,然後執行beforeMount鉤子函數,在這個函數中虛擬dom已經創建完成,馬上就要渲染,在這裏也可以更改數據,不會觸發updated,在這裏可以在渲染前最後一次更改數據的機會,不會觸發其他的鉤子函數,一般可以在這裏做初始數據的獲取

4. 接下來開始render,渲染出真實dom,然後執行mounted(安裝好的)鉤子函數,此時,組件已經出現在頁面中,數據、真實dom都已經處理好了,事件都已經掛載好了,可以在這裏操作真實dom等事情...

5. 當組件或實例的數據更改之後,會立即執行beforeUpdate,(更新之前)然後vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之後重新渲染,一般不做什麽事兒

6. 當更新完成後,執行updated,數據已經更改完成,dom也重新render完成,可以操作更新後的虛擬dom

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

8. 組件的數據綁定、監聽...去掉後只剩下dom空殼,這個時候,執行destroyed,在這裏做善後工作也可以

技術分享圖片

Vue中對生命周期的理解