最近一直在學習Vue，而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）改變了，所以，叫作組件更新之后