最近一直在學習Vue，而vue生命週期是我們不可能繞開的一個很核心的知識點，今天來簡單的梳理一下大概的內容。
一、鉤子函式
在一開始學習的時候，總有鉤子函式這個名詞冒出來，而且在vue官網文件中也頻繁出現，也相信給很多初學者帶來了困擾。那到底什麼是鉤子函式呢？
按我個人的理解，鉤子函式就是一個函式，他最大的特點就是在生命週期執行流程中去執行的。 鉤子函式鉤子函式，就是掛載一些東西的，我們把需要實現的一些功能程式碼寫在對應的鉤子函式中，當生命週期在執行的時候，就能執行我們掛載的程式碼。
鉤子函式的實現，基本原理就是callback，回撥函式。
二、vue生命週期圖示（註釋）
原圖是從vuejs官方文件上拷下來的，自己用ps寫了一點註釋。
三、vue生命週期詳細解析
1. 例項化vue(元件)物件：new Vue()
2. 初始化事件和生命週期 init events 和 init lifecycle
3. beforeCreate函式：
在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。
即此時vue（元件）物件被建立了，但是vue物件的屬性還沒有繫結，如data屬性，computed屬性還沒有繫結，即沒有值。此時還沒有資料和真實DOM。屬性還沒有賦值，也沒有動態建立template屬性對應的HTML元素（二階段的createUI函式還沒有執行）
4. 掛載資料（屬性賦值）
包括 屬性和computed的運算，通過依賴注入匯入依賴
5. Created函式：
此時vue物件的屬性有值了，但是DOM還沒有生成，$el屬性還不存在。
此時有資料了，但是還沒有真實的DOM
即：data，computed都執行了。屬性已經賦值，但沒有動態建立template屬性對應的HTML元素，所以，此時如果更改資料不會觸發updated函式
如果：資料的初始值就來自於後端，可以傳送ajax，或者fetch請求獲取資料，但是，此時不會觸發updated函式
6. 檢查
1）檢查是否有el屬性
檢查vue配置，即new Vue{}裡面的el項是否存在，有就繼續檢查template項。沒有則等到手動繫結呼叫vm.$mount()
完成了全域性變數$el的繫結。
2）檢查是否有template屬性
檢查配置中的template項，如果沒有template進行填充被繫結區域，則被繫結區域的el物件的outerHTML（即整個#app DOM物件，包括< div id=”app” >和< /div>標籤）都作為被填充物件替換掉填充區域
即：如果vue物件中有 template屬性，那麼，template後面的HTML會替換$el對應的內容。如果有render屬性（渲染），那麼render就會替換template。
即：優先關係時： render > template > el
7. beforeMount函式：
模板編譯(template)、資料掛載(把資料顯示在模板裡)之前執行的鉤子函式
此時 this.$el有值，但是資料還沒有掛載到頁面上。即此時頁面中的{{}}裡的變數還沒有被資料替換
8. 模板編譯：用vue物件的資料（屬性）替換模板中的內容
9. Mounted函式：
模板編譯完成，資料掛載完畢
即：此時已經把資料掛載到了頁面上，所以，頁面上能夠看到正確的資料了。
一般來說，我們在此處傳送非同步請求（ajax，fetch，axios等），獲取伺服器上的資料，顯示在DOM裡。
10. beforeUpdate函式：
元件更新之前執行的函式，只有資料更新後，才能呼叫（觸發）beforeUpdate，注意：此資料一定是在模板上出現的資料，否則，不會，也沒有必要觸發元件更新（因為資料不出現在模板裡，就沒有必要再次渲染）
資料更新了，但是，vue（元件）物件對應的dom中的內部（innerHTML）沒有變，所以叫作元件更新前。（資料更了，模板沒更新）
11. updated函式：
元件更新之後執行的函式
vue（元件）物件對應的dom中的內部（innerHTML）改變了，所以，叫作元件更新之後