1. 程式人生 > >vue.js生命週期鉤子詳解

vue.js生命週期鉤子詳解

Vue例項從建立到銷燬的過程,就是生命週期。

Vue的生命週期包括:開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程。

在Vue的整個生命週期中,提供了一系列的事件,可以註冊JavaScript方法,達到控制整個過程的目的,在這些JavaScript方法中的this直接指向的是vue的例項。

在Vue的整個生命週期中,例項可以呼叫一些生命週期鉤子,這提供了執行自定義邏輯的機會。

Vue提供的生命週期鉤子如下:

① beforeCreate

在例項初始化之後,資料觀測(data observer,開始監控Data物件資料變化)和初始化事件(init event,Vue內部初始化事件)之前被呼叫。

② created

在例項已經建立完成之後被呼叫。例項已完成以下的配置:資料觀測(data observer),屬性和方法的運算,event事件回撥。掛載階段尚未開始,$el 屬性不可見。

③ beforeMount

在掛載開始之前被呼叫。相關的render函式首次被呼叫。例項已完成以下的配置:編譯模板,把data裡面的資料和模板生成html。注意此時還沒有掛載html到頁面上。

④ mounted

在el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫。例項已完成以下的配置:用上面編譯好的html內容替換el屬性指向的DOM物件。此時模板中的html渲染到了html頁面中,此時一般可以做一些Ajax操作。注意mounted只會執行一次。

⑤ beforeUpdate

在資料更新之前呼叫,發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態,不會觸發附加的重渲染過程。

⑥ updated

在由於資料更改導致的虛擬DOM重新渲染和打補丁之後呼叫。呼叫時,元件DOM已經更新,所以可以執行依賴於DOM的操作。然而在大多數情況下,應該避免在此期間更改狀態,因為這可能會導致更新無限迴圈。該鉤子在伺服器端渲染期間不被呼叫。

⑦ beforeDestroy

在例項銷燬之前呼叫。例項仍然完全可用。

⑧ destroyed

在例項銷燬之後呼叫。呼叫後,所有的事件監聽器會被移除,所有的子例項也會被銷燬。該鉤子在伺服器端渲染期間不被呼叫。