書接上文，上一回我們們初入 Vue 框架的世界，跟著編寫了和 Vue 說的一句話 Say Hello。瞭解了 Vue 裡面一個核心的內容宣告式渲染。接下來，我們們快速地領略一下 Vue 的生命週期。
可能你會問了，啥叫生命週期啊？生命週期就是說生老病死。這剛和 Vue Say 個 Hello，咋就給整死了呢？可不是啊！這個生老病死說的是從出生到死亡的整個過程，我們們就快速地領略一下 Vue 從建立一個例項物件到被銷燬的整個過程。
Vue 的生命週期圖示
閒話少敘，書歸正傳。本著一圖勝千言的原則，先來給你看張圖吧：
是不是一臉懵逼？你就說是不是吧？！別不承認了，我第一次看到這張圖的時候，就是一臉懵逼的狀態。看完這張圖立馬有種想要放棄的節奏~
你可能在想，既然你知道，為啥還要先給我看這張圖？不想繼續做朋友了是不？！你想多了，真想多了！為啥這麼說呢？不信你去看看 Vue 官方給的學習文件去，在一上來講 Vue 例項的時候，最後就是這張圖。當時，我也是一臉懵逼啊！
說到這兒啊，其實是想跟客官你說，其實你看懂也好，看不懂也好，都不影響我們們接著往下說。
Vue 的生命週期鉤子
在看上面的這張圖的時候，不知道你有沒有注意到在這張圖中有三個比較特殊的標記：
- 建立例項：這個階段要初始化事件監聽、設定資料監聽，還要編譯模板。
- 掛載成功：將例項掛載到 DOM 結構上，並在資料變化的時候更新 DOM。
- 被銷燬了：把之前所做的一切都全部銷燬，化為烏有。
然後呢，在不同階段 Vue 還提供了一些鉤子。啥？鉤子？對的，就是鉤子。這鉤子是個啥？給你看一段介紹：
鉤子函式是Windows訊息處理機制的一部分，通過設定“鉤子”，應用程式可以在系統級對所有訊息、事件進行過濾，訪問在正常情況下無法訪問的訊息。鉤子的本質是一段用以處理系統訊息的程式，通過系統呼叫，把它掛入系統。
上面的這段話是百度百科給的關於鉤子是啥的解釋。不太好理解是吧？不過通過這段話，我們們倒是可以知道一點，就是鉤子都是函式。什麼樣的函式呢？如果在 JavaScript 中的話，其實就是回撥函式。指的就是啊，在某個特定條件下會被觸發執行的函式。
再簡單點來說，鉤子函式有點像我們們每天手機裡面設定的鬧鐘一樣。當你設定一個鬧鐘的時候，你會發現一到那個時候這個鬧鐘就會自動響起來。
這時候你可能會問了，那 Vue 提供了多少這樣的鉤子函式呢？那可老多了，我們現在就不一一來說了。後面的章回我們再細細說來。
那麼，現在我們就簡單來看一個案例吧：
<div id="app">
<span>{{ message }}</span>
</div>
<script src="scripts/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '前端課湛'
},
// 建立例項物件成功階段 - 事件監聽和資料觀察
created: function(){
console.log("建立例項: " + this.message);// 前端課湛
},
// 掛載成功階段 - $el和template可用
mounted: function(){
console.log("掛載成功: " + this.$el);// <div id="app"></div>
}
});
</script>
複製程式碼上面這段示例程式碼，使用了建立例項的一個鉤子函式 created() 和掛載成功的一個鉤子函式 mounted() 。執行之後的效果是這樣的：
說到這啊，我們們對 Vue 的世界就又進了一步了。是不是走得越近，發現越有趣了呢？！