創建階段
1.創建一個Vue的實例
new Vue({});
2.Init Events & Lifecycle
表示剛初始化了一個Vue空的實例對象，這時候，這個對象身上只有默認的一些生命周期函數和默認的事件。其它的還沒有創建。
3.beforeCreate
beforeCreate與data、methods等平級，是第一個生命周期函數。表示實例完全被創建出來之前，會執行該函數
var vm=new Vue({
el:"#app",
data:{
msg:'hello'
},
methods:{
show(){
console.log('show()');
}
},
beforeCreate() {
console.log(this.msg);//undefined
this.show(); //TypeError:this.show is not a function
}
})
由上可知，在beforeCreate生命周期執行的時候，data和methods中的數據都還沒有初始化。
4.Init injections & reactivity
初始化data和methods。
5.created
這是第二個生命周期函數
var vm = new Vue({
el: "#app",
data: {
msg: 'hello'
},
methods: {
show() {
console.log('show()');
}
},
created() {
console.log(this.msg);//'hello'
this.show();//'show()'
}
})
如果要調用methods中的方法或者操作data中的數據，最早只能在created中去操作
6.判斷流程圖
表示Vue開始編譯模板，把Vue代碼中的指令進行執行，最終在內存中生成一個編譯好的最終模板字符串。然后把這個模板字符串渲染為內存中的DOM。此時，只是在內存中，渲染好了模板，並沒有把模板掛載到真正的頁面中去
7.beforeMount
這是第三個生命周期函數，表示模板已經在內存中編譯完成，但尚未把模板渲染到頁面中。
<div id="app">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'hello'
},
methods: {
show() {
console.log('show()');
}
},
beforeMount() {
console.log(document.getElementById("h3").innerText);//{{msg}}
}
})
</script>
在beforeMount執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串。創建vm.$el並替換掉'el'這一步，將內存中編譯好的模板，真實地替換到瀏覽器的頁面中去。
8.mounted
表示內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
var vm = new Vue({
el: "#app",
data: {
msg: 'hello'
},
methods: {
show() {
console.log('show()');
}
},
mounted() {
console.log(document.getElementById("h3").innerText);//'hello'
}
})
mounted是實例創建期間的最后一個生命周期函數。當執行完mounted就表示，實例已經完全創建好了，此時若沒有其它操作，這個實例就靜靜地躺在我們的內存中一動不動。此時組件脫離創建階段進入運行階段。
運行階段
1.beforeUpdate
當且僅當data被修改時才觸發這個生命周期函數，但此時僅僅是數據被修改，頁面還未更新。
<div id="app">
<input type="button" value="修改" @click="msg='hello world'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'hello'
},
methods: {
show() {
console.log('show()');
}
},
beforeUpdate() {
console.log('界面上的元素的內容:'+document.getElementById("h3").innerText);//hello
console.log('data中的數據:'+this.msg);//hello world
}
})
</script>
2.更新虛擬DOM
根據data中的數據，在內存中重新渲染出一份虛擬DOM，當最新的內存DOM樹被更新之后，會把最新的內存DOM樹，重新渲染到真實的頁面中去，此時完成數據從data(model層)->view(視圖層)的更新
3.updated
Updated() {
console.log('界面上的元素的內容:'+document.getElementById("h3").innerText);//hello world
console.log('data中的數據:'+this.msg);//hello world
}
此時的data數據和頁面已完成同步
銷毀階段
beforeDestory 和 destoryed
當執行beforeDestory鈎子函數的時候，Vue實例就已經從運行階段，進入到了銷毀階段。
當執行beforeDestory的時候，實例身上所有的data和所有的methods，以及過濾器、指令...都處於可用狀態，此時還沒有真正執行銷毀過程。
當執行到destoryed函數的時候，組件已經被全部銷毀了，data與methods均不可用。