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

摘要： 大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github： https://github.com/Daotin/Web 微信公眾號： Web前端之巔 部落格園： http://www.cnblogs.c...

一、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
destroyed

整個生命週期的圖示為：