最近一直在學(xué)習(xí)Vue，而vue生命周期是我們不可能繞開的一個很核心的知識點，今天來簡單的梳理一下大概的內(nèi)容。
在一開始學(xué)習(xí)的時候，總有鉤子函數(shù)這個名詞冒出來，而且在vue官網(wǎng)文檔中也頻繁出現(xiàn)，也相信給很多初學(xué)者帶來了困擾。那到底什么是鉤子函數(shù)呢？
按我個人的理解，鉤子函數(shù)就是一個函數(shù)，就是在vue實例在某個時間點自動執(zhí)行的函數(shù)。鉤子函數(shù)鉤子函數(shù)，就是掛載一些東西的，我們把需要實現(xiàn)的一些功能代碼寫在對應(yīng)的鉤子函數(shù)中，當(dāng)生命周期在執(zhí)行的時候，就能執(zhí)行我們掛載的代碼。
鉤子函數(shù)的實現(xiàn)，基本原理就是callback，回調(diào)函數(shù)。
原圖是從vuejs官方文檔上拷下來的，自己用ps寫了一點注釋。
在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
即此時vue（組件）對象被創(chuàng)建了，但是vue對象的屬性還沒有綁定，如data屬性，computed屬性還沒有綁定，即沒有值。此時還沒有數(shù)據(jù)和真實DOM。屬性還沒有賦值，也沒有動態(tài)創(chuàng)建template屬性對應(yīng)的HTML元素（二階段的createUI函數(shù)還沒有執(zhí)行）
包括 屬性和computed的運算，通過依賴注入導(dǎo)入依賴
此時vue對象的屬性有值了，但是DOM還沒有生成，$el屬性還不存在。
此時有數(shù)據(jù)了，但是還沒有真實的DOM
即：data，computed都執(zhí)行了。屬性已經(jīng)賦值，但沒有動態(tài)創(chuàng)建template屬性對應(yīng)的HTML元素，所以，此時如果更改數(shù)據(jù)不會觸發(fā)updated函數(shù)
如果：數(shù)據(jù)的初始值就來自于后端，可以發(fā)送ajax，或者fetch請求獲取數(shù)據(jù)，但是，此時不會觸發(fā)updated函數(shù)
1）檢查是否有el屬性
檢查vue配置，即new Vue{}里面的el項是否存在，有就繼續(xù)檢查template項。沒有則等到手動綁定調(diào)用vm.$mount()
完成了全局變量$el的綁定。
2）檢查是否有template屬性
檢查配置中的template項，如果沒有template進行填充被綁定區(qū)域，則被綁定區(qū)域的el對象的outerHTML（即整個#app DOM對象，包括< div id=”app” >和< /div>標(biāo)簽）都作為被填充對象替換掉填充區(qū)域
即：如果vue對象中有 template屬性，那么，template后面的HTML會替換$el對應(yīng)的內(nèi)容。如果有render屬性（渲染），那么render就會替換template。
即：優(yōu)先關(guān)系時： render > template > el
模板編譯(template)、數(shù)據(jù)掛載(把數(shù)據(jù)顯示在模板里)之前執(zhí)行的鉤子函數(shù)
此時 this.$el有值，但是數(shù)據(jù)還沒有掛載到頁面上。即此時頁面中的{{}}里的變量還沒有被數(shù)據(jù)替換
模板編譯完成，數(shù)據(jù)掛載完畢
即：此時已經(jīng)把數(shù)據(jù)掛載到了頁面上，所以，頁面上能夠看到正確的數(shù)據(jù)了。
一般來說，我們在此處發(fā)送異步請求（ajax，fetch，axios等），獲取服務(wù)器上的數(shù)據(jù)，顯示在DOM里。
組件更新之前執(zhí)行的函數(shù)，只有數(shù)據(jù)更新后，才能調(diào)用（觸發(fā)）beforeUpdate，注意：此數(shù)據(jù)一定是在模板上出現(xiàn)的數(shù)據(jù)，否則，不會，也沒有必要觸發(fā)組件更新（因為數(shù)據(jù)不出現(xiàn)在模板里，就沒有必要再次渲染）
數(shù)據(jù)更新了，但是，vue（組件）對象對應(yīng)的dom中的內(nèi)部（innerHTML）沒有變，所以叫作組件更新前。（數(shù)據(jù)更了，模板沒更新）
組件更新之后執(zhí)行的函數(shù)
vue（組件）對象對應(yīng)的dom中的內(nèi)部（innerHTML）改變了，所以，叫作組件更新之后
