#### 1. 創建階段 1. beforeCreate(): 第一個生命周期函數，此時獲取不到data 2. created(): 這是我們遇到的第二個生命周期函數,在created中，data和methods都已經被初始化好了! 3. beforeMount(): 這是我們遇到的第3個生命周期函數，表示模板已經在內存中編輯完成了，但是尚未把模板渲染到頁面 ``` console.log((document.getElementById("h1")).innerText); //{{msg}} ``` 在beforeMount執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串 4. mounted(): 第四個生命周期函數，表示，內存中的模板，已經真實掛載到了頁面中，用戶已經可以看到渲染的頁面了 ``` console.log((document.getElementById("h1")).innerText); //ok ``` 注意：mounted是實例創建期間的最后一個生命周期函數，當執行完了mounted就表示，實例已經被完全創建好了 #### 2. 運行階段 1. beforeUpdate(): 這時候我們的界面還沒有被更新，但數據已經被更新了 得出結論：當執行beforeUpdate的時候，頁面中的顯示的數據，還是舊的，此時data數據是最新的，頁面尚未和最新的數據保持同步 此時改數據不會死循環 ``` console.log("頁面顯示的數據是:"+document.getElementById("h1").innerText); //old console.log("data中的數據是:"+ this.msg); //new ``` 2. updated(): 數據已經重新渲染到DOM樹，頁面更新完畢，不要在update中改數據，否則會導致視圖陷入死循環 #### 3. 銷毀階段 1. beforeDestory(): 進入before銷毀階段，此時實例所有東西還可用，尚未真正進入銷毀狀態 2. destroyed() 銷毀：手動移除組件，或者路由切換 vm.$destroy(): 移除所有的觀察者，移除監聽事件 實例銷毀，所有內存不可用