Vue的生命週期函式有8個，分別是：beforeCreate,   created,   beforeMount,   mounted,   beforeUpdated,   updated,   beforeDestroy,   destroyed.   下面是個人的一些總結。

• beforeCreate   在它之前剛初始化了一個空的vue例項物件，在這個階段，例項物件身上只有預設的一些生命 周期函式和預設的事件，其他的東西都未建立，在這個生命週期執行的 時候，data和methods中的資料都還沒有初始化  

    <div id="app"></div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				msg: "hello"
			},
			methods: {
				show() {
					console.log("我是show方法")
				}
			},
			beforeCreate() {
				console.log(this.msg)
				this.show()
			}
		})
	</script>
 

不知什麼原因，程式碼編輯器用不了，改為圖片

 從控制檯輸出的結果看，h1中的內容原本是hello的，但在這個階段卻是 {{ msg }} ，由此說明在 beforeMount 階段模板還沒有被真正替換過來，只是之前寫的一些模板字串

• created   在created中，data和methods等都已經被初始化好了，所以如果要用到methods中的方法或者操作data中的資料，最早只能在created中操作 
• beforeMount   接著下來，vue開始編輯模板，執行vue的程式碼，最終會在記憶體中生成一個編譯好的最終模板字串，緊接著渲染為記憶體中的DOM，也就是說，此函式在執行的時候，只是在記憶體中渲染好了模板，而沒有把模板掛載到真正的頁面中去
  ，這個階段，頁面還是舊的
• mounted   這個時候已經將在記憶體中編譯好的模板，真正的替換到瀏覽器的頁面中去，如果要操作頁面上的DOM節點，最早要在mounted中進行。只要執行完了mounted，就表示整個vue例項已經初始化完畢了。此時，元件已經脫離了建立階段，進入到了執行階段 

元件執行階段的生命週期函式只有兩個，beforeUpdate和updated，這兩個事件會根據data資料的改變，有選擇的觸發0次或者多次。

 從控制檯輸出的結果看，這個階段資料已經被更新了，但是我們的介面還沒有被更新 

• beforeUpdate   當執行beforeUpdate的時候，頁面中顯示的資料還是舊的，不過這個時候data中的資料是最新的，頁面尚未和最新的資料保持同步
• updated   到達這個時候，會先根據data中最新的資料， 在記憶體中重新渲染出一份最新的DOM樹，更新完後緊接著把這份最新的DOM樹重新渲染到真實的頁面中去，這樣就完成了data（model層）到view（檢視層）的更新。updated事件執行的時候，頁面和data中的資料已經保持同步了，都是最新的了
• beforeDestroy   當執行beforeDestroy的時候，vue例項就已經從執行階段，進入到了銷燬階段。這個時候例項身上的data和methods以及component等等都處於可用狀態，還沒有真正執行銷燬的過程
• destroyed   當執行到destroyed函式的時候，元件已經被完全銷燬了，此時元件中的data,methods等等都已經不可用了