從零開始學 Web 之 Vue.js（三）Vue例項的生命週期

一、vue例項的生命週期

vue例項的生命週期指的是：從Vue例項建立，執行，到銷燬期間，會伴隨著各種各樣的事件，這些事件統稱為生命週期。

生命週期事件，也稱生命週期函式，也稱生命週期鉤子。

二、生命週期函式三個階段

建立期間的生命週期函式：beforeCreate 和 created，beforeMount 和 mounted。

執行期間的生命週期函式：beforeUpdate 和 updated

銷燬期間的生命週期函式：beforeDestroy 和 destroyed

三、生命週期函式詳解

建立期間：

• beforeCreate：表示例項完全被建立出來之前，會執行beforeCreate函式，這時data 和 methods 中的 資料都還沒有沒初始化，如果呼叫data和methods的資料的話，會報錯。
  

• created：例項已經在記憶體中建立OK，此時 data 和 methods 已經建立OK，此時還沒有開始 編譯模板。

• beforeMount：此時已經完成了模板的編譯，但是還沒有從記憶體掛載到頁面中。

注意：在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板（比如插值表示式）還只是字串的形式。

• mounted： 此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示。

執行期間：

• beforeUpdate：data資料更新之後，但是還未渲染到頁面時執行的函式。這時data資料已經更新，但是頁面的資料還是舊的。

• updated：updated 事件執行的時候，頁面和 data 資料已經保持同步了，都是最新的。

銷燬期間：

• beforeDestroy：例項銷燬之前呼叫。在這一步，例項上的data，methods等仍然完全可用。

• destroyed：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

整個生命週期的圖示為：

原文出處：https://www.cnblogs.com/lvonve/p/9622517.html