在vue官網中我們可以看到vue的生命週期圖示，它描述了一個vue元件從初始化到被銷燬的全部過程。

本質上，每個主要Vue生命週期事件被分成兩個鉤子，分別在事件之前和之後呼叫。Vue應用程式中有4個主要事件(8個主要鉤子)。

• 建立 — 在元件建立時執行

• 掛載 — DOM 被掛載時執行

• 更新 — 當響應資料被修改時執行

• 銷燬 — 在元素被銷燬之前立即執行

下面分別對8個主要鉤子函式做一個說明：

beforecreat： 執行時已經建立了一個vue空殼框架（相當與new了一個空物件）

created：執行時已經完成資料及函式的初始化

beforemount：執行時已經完成頁面模板的編譯，並已經將資料載入成記憶體中的dom（簡單理解為html）， 執行拿取節點是拿不到的，因為dom還未被渲染到頁面上

mounted：執行時已經將記憶體中的dom渲染到頁面中 （此時vue例項建立完畢，進入執行階段），mounted 不會保證所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以在 mounted 內部使用 vm.$nextTick：

beforeupdate：此時頁面data發生了改變，但為渲染到頁面中

updated：此時已經將改變後的data渲染到新的dom中並完成了更新，updated 不會保證所有的子元件也都一起被重繪。如果你希望等到整個檢視都重繪完畢，可以在 updated 裡使用 vm.$nextTick：

beforedestory：此時元件進入銷燬階段，但資料仍然可以使用

destory：元件銷燬

而在實際應用中，vue為了提高頁面的使用效率，在使用元件時是可以使用快取功能的，在使用keep-alive標籤後，被他包含的元件就會被快取。例如，如果我們使用<keep-alive>元件來管理不同的選項卡檢視，每次在選項卡之間切換時，每個動態元件的狀態都將被快取和儲存。

那麼，既然存在了快取，該元件就不會輕易的被銷燬掉，所以，使用了快取後的元件在實際上被建立了之後就一直會存在，而他的created鉤子就只會執行一遍，如果想要每次進入該元件就執行一個方法的話，就需要寫另一個鉤子函式：activated, 而與之對應的還有一個函式：deactivated ，這兩個生命週期鉤子函式互斥執行，activated是在元件被啟用時呼叫，而deactivated 是在元件被停用時執行。

比如：我們有兩個元件：A元件與b元件，他們均被<keep-alive>快取，a元件中寫了3個方法

created() {
   console.log("元件A被建立");
}，
activated() {
   console.log("元件A被啟用");
}，
deactivated () {
   console.log("元件A被停用");
}

b元件中也有3個方法：

created() {
   console.log("元件B被建立");
}，
activated() {
   console.log("元件B被啟用");
}，
deactivated () {
   console.log("元件B被停用");
}

當我們使用A元件時，a元件的created和activated方法執行，當切換到b元件時，a元件的deactivated方法執行，b元件的created和activated方法執行，之後，不管切換的是哪個元件，他的created都不會被執行