最近一直在學習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）改變了，所以，叫作組件更新之后
12. beforeDestroy：vue（組件）物件銷毀之前
13. destroyed：vue組件銷毀后
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2419.html
標籤：JavaScript
下一篇：一起學Vue自定義組件之進度條