速看 Vue 世界的生命輪迴

上一回：初入 Vue 的世界 Say Hello

書接上文，上一回我們初入 Vue 框架的世界，跟着編寫了和 Vue 說的一句話 Say Hello。瞭解了 Vue 裏面一個核心的內容聲明式渲染。接下來，我們快速地領略一下 Vue 的生命週期。

---

可能你會問了，啥叫生命週期啊？生命週期就是說生老病死。這剛和 Vue Say 個 Hello，咋就給整死了呢？可不是啊！這個生老病死說的是從出生到死亡的整個過程，我們就快速地領略一下 Vue 從建立一個實例對象到被銷燬的整個過程。

Vue 的生命週期圖示

閒話少敘，書歸正傳。本着一圖勝千言的原則，先來給你看張圖吧：

是否是一臉懵逼？你就說是否是吧？！別不認可了，我第一次看到這張圖的時候，就是一臉懵逼的狀態。看完這張圖立馬有種想要放棄的節奏~

你可能在想，既然你知道，爲啥還要先給我看這張圖？不想繼續作朋友了是不？！你想多了，真想多了！爲啥這麼說呢？不信你去看看 Vue 官方給的學習文檔去，在一上來說 Vue 實例的時候，最後就是這張圖。當時，我也是一臉懵逼啊！

說到這兒啊，實際上是想跟客官你說，其實你看懂也好，看不懂也好，都不影響我們接着往下說。

Vue 的生命週期鉤子

在看上面的這張圖的時候，不知道你有沒有注意到在這張圖中有三個比較特殊的標記：

1. 建立實例：這個階段要初始化事件監聽、設置數據監聽，還要編譯模板。
2. 掛載成功：將實例掛載到 DOM 結構上，並在數據變化的時候更新 DOM。
3. 被銷燬了：把以前所作的一切都所有銷燬，化爲烏有。

而後呢，在不一樣階段 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 的世界就又進了一步了。是否是走得越近，發現越有趣了呢？！

下一回：Vue 官方贈送的橙色裝備