首先，我們看一下生命周期圖例：
生命周期.png
Vue把整個生命周期劃分為創建、掛載、更新、銷毀等階段，每個階段都會給一些“鉤子”讓我們來做一些我們想實現的動作。學習實例的生命周期，能幫助我們理解vue實例的運行機制，更好地合理利用各個鉤子來完成我們的業務代碼。
我們分別來看看這幾個階段：
1、beforeCreate
此階段為實例初始化之后，此時的數據觀察和事件配置都沒有準備好。
我們試著console一下實例的數據data和掛載元素el，代碼如下：
<div id="app">{{ name }}</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: '前端學習'
},
beforeCreate(){
console.log('即將創建')
console.log(this.$data)
console.log(this.$el)
}
})
</script>
得到的結果：
效果圖.png
此時，實例中的data和el還是不可用的。
2、created
beforeCreated之后緊接著的鉤子就是創建完畢的created，我們可以同樣打印一下數據data和掛載元素el，看看結果會是什么？
效果圖.png
此時我們能讀取到數據data的值，但是DOM還沒有生成，所以屬性el還不存在，輸出$data為一個Object對象，而$el的值為undefined。
3、beforeMount
上一個階段我們都知道DOM還沒有生成，屬性el還未undefined，那么，此階段未即將掛載，我們打印一下此時的$el是什么？
增加一下代碼：
beforeMount(){
console.log('即將掛載')
console.log(this.$data)
console.log(this.$el)
}
打印結果如下：
效果圖.png
此時的$el不再是undefined，而是成功關聯到我們指定的dom節點<div id=”app”></div>，但此時{{ name }}還沒有被成功地渲染成我們data中的數據。沒事，我們接著往下看。
4、mounted
mounted也就是掛載完畢階段，到了這個階段，數據就會被成功渲染出來，我們編寫mounted的鉤子，打印$el 看看：
mounted(){
console.log('掛載完畢')
console.log(this.$data)
console.log(this.$el)
}
結果如下：
效果圖.png
如我們所愿，此時打印屬性el，我們看到{{ name }}已經成功渲染成我們data.name的值：“前端學習”。
5、beforeUpdate
我們知道，當修改vue實例的data時，vue就會自動幫我們更新渲染視圖，在這個過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改數據的時候，更新渲染視圖之前就會觸發鉤子beforeUpdate。
html片段代碼我們加上ref屬性，用于獲取DOM元素。
<div ref="app" id="app">
{{ name }}
</div>
Vue實例代碼加上beforeUpdate鉤子代碼：
beforeUpdate () {
console.log('=即將更新渲染=')
let name = this.$refs.app.innerHTML
console.log('name:' + name)
}
我們試一下，在控制臺修改一下實例的數據name，在更新渲染之前，我們打印視圖中文本innerHTML的內容會是多少：
效果圖.gif
我們在控制臺把app.name的值從原來的“前端君”修改為“web前端教程”，在更新視圖之前beforeUpdate打印視圖上的值，結果依然為原來的值：前端君，表明在此階段，視圖并未重新渲染更新。
6、updated
此階段為更新渲染視圖之后，此時再讀取視圖上的內容，已經是最新的內容，接著上面的案例，我們添加鉤子updated的代碼，如下：
updated () {
console.log('==更新成功==')
let name = this.$refs.app.innerHTML
console.log('name:' + name)
}
結果如下：
效果圖.gif
大家注意兩個不同階段打印的name的值是不一樣的，updated階段打印出來的name已經是最新的值：web前端教程，說明此刻視圖已經更新了。
7、beforeDestory
調用實例的destory()方法可以銷毀當前的組件，在銷毀前，會觸發beforeDestory鉤子。
8、destoryed
成功銷毀之后，會觸發destoryed鉤子，此時該實例與其他實例的關聯已經被清除，它與視圖之間也被解綁。
9、actived
keep-active組件被激活的時候調用。
10、deactivated
keep-alive組件停用時調用。
