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