Vue - 生命週期詳解

Vue實例有一個完整的生命週期，也就是說從開始建立、初始化數據、編譯模板、掛在DOM、渲染-更新-渲染、卸載等一系列過程，咱們成爲Vue 實例的生命週期，鉤子就是在某個階段給你一個作某些處理的機會。

生命週期圖.jpg

生命週期文字解析.jpg

beforeCreate( 建立前 )

在實例初始化以後，數據觀測和事件配置以前被調用，此時組件的選項對象還未建立，el 和 data 並未初始化，所以沒法訪問methods， data， computed等上的方法和數據。

created ( 建立後 ）

實例已經建立完成以後被調用，在這一步，實例已完成如下配置：數據觀測、屬性和方法的運算，watch/event事件回調，完成了data 數據的初始化，el沒有。 然而，掛在階段尚未開始, $el屬性目前不可見，這是一個經常使用的生命週期，由於你能夠調用methods中的方法，改變data中的數據，而且修改能夠經過vue的響應式綁定體如今頁面上，，獲取computed中的計算屬性等等，一般咱們能夠在這裏對實例進行預處理，也有一些童鞋喜歡在這裏發ajax請求，值得注意的是，這個週期中是沒有什麼方法來對實例化過程進行攔截的，所以假若有某些數據必須獲取才容許進入頁面的話，並不適合在這個方法發請求，建議在組件路由鉤子beforeRouteEnter中完成

beforeMount（載入前）

掛在開始以前被調用，相關的render函數首次被調用（虛擬DOM），實例已完成如下的配置： 編譯模板，把data裏面的數據和模板生成html，完成了el和data 初始化，注意此時尚未掛在html到頁面上。

mounted（載入後）

掛在完成，也就是模板中的HTML渲染到HTML頁面中，此時通常能夠作一些ajax操做，mounted只會執行一次。

beforeUpdate（更新前）

在數據更新以前被調用，發生在虛擬DOM從新渲染和打補丁以前，能夠在該鉤子中進一步地更改狀態，不會觸發附加地重渲染過程

updated（更新後）

在因爲數據更改致使地虛擬DOM從新渲染和打補丁只會調用，調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做，而後在大可能是狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環，該鉤子在服務器端渲染期間不被調用

beforeDestrioy （銷燬前）

在實例銷燬以前調用，實例仍然徹底可用，

1. 這一步還能夠用this來獲取實例，
2. 通常在這一步作一些重置的操做，好比清除掉組件中的定時器 和 監聽的dom事件

destroyed（銷燬後）

在實例銷燬以後調用，調用後，因此的事件監聽器會被移出，全部的子實例也會被銷燬，該鉤子在服務器端渲染期間不被調用

做者：前端_周瑾
連接：https://www.jianshu.com/p/672... 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。