先來點比喻

就跟噴火龍一樣，要成為完整的 Vue 實體，要先從蛋 → 小火龍 → 火恐龍 → 噴火龍一步一步進化與成長。在我們享受 vue 有如噴火龍的大字爆炎強大功能時，其實每次 Vue 實例都要經過蛋、小火龍跟火恐龍的成長階段。

而且，在成長階段中，我們還可以指定 Vue 還是小火龍的階段時，先做些什麼事情（學賣萌之類的）。到火恐龍的階段時，再做什麼事情（耍中二之類的）。當然到了噴火龍階段，你還可以使他進行許多的變化，例如裝備道具、學新招式、Mega 進化成 Mega 噴火龍 X 或 Mega 噴火龍 Y。

經過一番激鬥之後，任務完成，體會了生命的意義，噴火龍壽終正寢。

「我的人生，過得實在太充實美妙啦！」

不過我得承認這個比喻非常不精準，因為我之前認識到 Vue 可能會把火恐龍的階段的事情先做了，但小火龍階段的事情還沒做好，導致程式出錯。寫程式時還需要額外處理。

生命週期掛勾（life-cycle hook）

正式來說，Vue 實體被初始化之前直到完成，有以下過程，在每個粗體字所顯示的掛鉤中，我們都可以在裡面寫程式碼，讓各個階段準備好我們需要的資料與運算，讓小火龍順利進化成噴火龍。

• beforeCreate - Vue 實體初始化之前
• created - Vue 實體初始化之後，加入 DOM 之前
• beforeMount - 確認有哪些元素（el,template等等）準備好加入 DOM 之前
• mounted - 確認而且建置好元素之後，進行編譯與掛載（可是這是 ing 進行式，不是已加入 DOM）
  到這裡我們就是個完整的 Vue 實體，噴火龍可以上戰場了。另外，mounted算是最常用到的，例如 AJAX 取得 JSON 資料時的程式碼就可以考慮放在 mounted掛勾。

let vm = new Vue({
    el: '#app',
    data: {
        getJson: [], // 把從遠處 JSON 得來的資料放在這
    },
    mounted(){
        const that = this; // 作用域問題，賦予 that 一個 this 的意思
        const api = ' JSON 網址 '; // 要從哪裡得到資料

        $.get(api).then(function(response) { // 用 jQuery 函式庫去取得 JSON 資料
        that.getJson = response; // 把得來的資料放進 Vue 實例的 data 裡
        });
    },
})

這樣子，Vue 實體渲染頁面時，就可以自動依據data內資料渲染頁面，使用我們之前學過的 v-for、v-text、v-on等等功能。不用特地做個按鈕，按下去才去從遠端找資料，才渲染畫面。

不只是剛剛的掛勾，當輸出到 DOM 的資料有變動，還有整個 Vue 實體銷毀的時候，還會有以下四個掛勾。

• beforeUpdate - 接收到更改數據的命令，要重新渲染 DOM 之前。
• updated - 已經更改數據、重新渲染 DOM 了。
• beforeDestroy - 整個 Vue 實體要銷毀、從 DOM 移除之前。
• destroyed - Vue 實體銷毀之後。

不過今天或許會突然想說：我沒有要讓我的噴火龍安心去世啊！我只是想暫時「藏起來」而已，因為待會可能還會再用到，而且甚至還要預留保存使用者已經輸入的資料。

這得到「Vue 元件」的<keep-alive>講解，這裡先知道大概就好：的確，是可以透過<keep-alive>保持實體的狀態，而且可以在mounted之後進入activated掛勾，需要時維持activated，隱藏時進入deactivated掛勾。

• activated - keep-alive元件啟用時，重複啟用元件時也會重新觸發一次，不會全局刷新 vue.js，所以created也不會再被觸發。
• deactivated - keep-alive元件停用時，隱藏且緩存資料，避免重新被渲染。

此文諸多不周到的地方還請各方大大多多包涵指教。