生命週期：其實就是一個組件從創建到銷燬的這個過程叫做生命週期（鉤子函數）
其實從官網的生命週期的圖例就可以看出來，生命週期分八個階段
分別爲：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory，destroyed
接下來，我們就一個階段一個階段的嘗試，實驗並且理解。
在開始之前，我們需要先搭建一個實例的模板出來：
<body>
<div id="app">
<h3 id="h3">{{msg}}</h3>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"aaa"
},
methods:{
show(){
console.log("bbb")
}
}
})
</script>
</body>
這時候頁面上顯示的是：
1、創建前（beforeCreate）
這是我們遇到的第一個生命週期函數，它表示的是在實例創建出來之前，會執行它，此時，還沒有data和methods屬性
var vm=new Vue({
el:"#app",
data:{
msg:"aaa"
},
methods:{
show(){
console.log("bbb")
}
},
//這是我們遇到的第一個生命週期函數
//表示實例在創建出來之前，會執行它，此時，還沒有data和methods屬性
beforeCreate(){
//在beforeCreate生命週期函數執行的時候，data和methods都沒被初始化
//當我們在頁面上想拿到自己定義的msg的時候，這時候頁面現實的是undefind
console.log(this.msg)
}
})
頁面上顯示：
2、 創建後(created)
這是我們遇到的第二個生命週期函數，在created裏，此時data和methods都被創建好了，但仍然不能獲取Dom元素
//這是我們遇到的第二個生命週期函數
created(){
//在created裏，此時data和methods都被創建好了，但仍然不能獲取Dom元素
console.log(this.msg) //aaa
this.show() //bbb
},
此時，我們看一下我們頁面上顯示的內容吧
此時，數據data已經初始化完成，方法也已經可以調用，但是DOM未渲染。
3、載入前（beforeMount）
表示模板已經在內存中編譯完成了，但是還沒把模板渲染到頁面中去，在執行beforeMount的時候，頁面中的元素還沒有真正被替換過來，只是之前寫的一些模板字符串
//這是我們遇到的第三個生命週期函數（載入前）
//表示模板已經在內存中編譯完成了，但是還沒把模板渲染到頁面中去
beforeMount(){
//在執行beforeMount的時候，頁面中的元素還沒有真正被替換過來，只是之前寫的一些模板字符串
//讓我們來獲取一下當前頁面上的元素吧
console.log(document.getElementById("h3").innerText)
},
此時，頁面上顯示着
並沒有替換到我們的要顯示的aaa
4、載入後(mounted)
這是我們遇到的第四個生命週期函數，這時候拿到的就是頁面中的最新的數據，注意：mounted是實例創建期間的最後一個生命週期函數
mounted(){
//此時我們再來獲取一下頁面上的元素吧
console.log(document.getElementById("h3").innerText)
},
此時頁面上打印出來的是：
注意：mounted是實例創建期間的最後一個生命週期函數，當執行完mounted就表示實例已經被完全創建好了，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內存中，一動不動
接下來，就是運行中的兩個事件，這時候表示我們的界面還沒有被更新，但是數據肯定被更新了
5、更新前（beforeUpdate）
當執行beforeUpdate的時候，頁面中的顯示數據，還是舊的，此時data數據是最新的，頁面尚未和最新的數據保持同步
//接下來是運行中的兩個事件
//這時候表示我們的界面還沒有被更新
//【數據被更新了嗎？】數據肯定被更新了
beforeUpdate(){
//獲取下當前頁面上顯示的是
console.log("當前顯示的是"+document.getElementById("h3").innerText)
//當前的數據是：
console.log("當前數據是："+this.msg)
},
當執行這個的時候，我們需要更改頁面上的數據，當你觸發幾次他就會執行幾次，最少0次（數據從沒被改變），最多無數次。
此時打印出來的是，此時，我們給那個按鈕綁定了一個點擊事件，只要一點擊那個按鈕，頁面上的數據就會更改一下，原來是aaa，現在改爲了bbb，但是打印出來的可不是這樣的
6、更新後（updated）
此時，頁面和data數據都保持同步了，都是最新的。
updated(){
//獲取下當前頁面上顯示的是
console.log("當前顯示的是："+document.getElementById("h3").innerText)
//當前的數據是：
console.log("當前數據是："+this.msg)
},
此時，當我們點擊按鈕時，頁面上打印的是
//當前頁面上的數據是bbb，msg數據也是bbb
7、銷燬前（beforeDestroy）
當執行beforeDestory鉤子函數的時候，vue實例，就已經從運行階段進入到銷燬階段，實例身上的所有的data和所有的methods以及過濾器，都處於可用的狀態，但此時，還沒有真正執行到銷燬的過程。
8、銷燬後（destroyed）
當執行到destroyed函數的時候，組件已經被完全銷燬了，此時，組件中所有的數據，方法，指令，還有過濾器，所有的東西都已經不可以用了~
下面是我自己在官網圖上總結下來的：
