一 理解vue的生命周期，首先需要注意幾個關鍵字
1. el :選擇器
2. $el：對應選擇器的template模板（html代碼）
3. render：也是vue實例中的一項，其參數更接近vue解析器，按優先級，render參數 > vue實例對象中有template > 外部的HTML模板 后面兩個也是將其編譯成render函數
【注意】render選項參數比template更接近Vue解析器！所以優先級如下：
render函數選項 > template參數 > 外部HTML
4. $mount ：當Vue實例沒有el屬性時，則該實例尚沒有掛載到某個dom中，假如需要延遲掛載，可以在之后手動調用vm.$mount()方法來掛載。例如：
new Vue({內部無el項}).$mount('#app')是延遲加載，同下面的語句相同
new Vue({el:"#app",***})
二 各個生命周期 beforecreate》created》beforeMount》mounted》beforeDestroy
1. beforecreate：el 和 data 並未初始化；
案例：可以在這加個loading事件 及獲取路由參數，但是this.(data｜computed｜methods）參數均為undefind（無法訪問到 el 屬性和 data 屬性等），看不到頁面的任何內容
2. 在beforeCreate和created之間：在這個生命周期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變），頁面內容如彈框等都存在了，也能被看到；
3. created:組件實例創建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在(this.$refs.XXX===undfined)。
案例：在這結束loading，還做一些初始化，如根據父組件props計算當前組件數據
4. created和beforeMount之間：首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命周期，直到在該vue實例上調用vm.$mount(el)。再次判斷template參數選項的有無（因為vue需要通過el找到對應的outer template）：
（1）如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。
（2）如果沒有template選項，則將外部HTML作為模板編譯。
（3）可以看到template中的模板優先級要高於outer HTML的優先級。
如果沒有template,則通過render傳人的createElement編譯
5. beforeMount：完成了 el 和 data 初始化 。
坑：如果直接使用{{msg}} 在生命周期beforeMount期間，此刻的msg數據尚未編譯至{{msg}}中，用戶能看到一瞬間的{{msg}} v-cloak可解決
6. beforeMount和mounted之間：給vue實例對象添加$el成員，並且替換掉掛在的DOM元素
7. mounted ：完成掛載
案例： 在這發起后端請求，拿回數據，配合路由鈎子做一些事情
8. beforeUpdate：可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化
9. beforeUpdate和update之間：當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染（重新渲染虛擬 dom,並通過 diff 算法對比 vnode 節點差異更新真實 dom (virtual DOM re-render and patch)），先后調用10. beforeUpdate和updated鈎子函數（beforeUpdate：可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化，updated： view層才被重新渲染，數據更新。此處可回顧下react對更新函數。
11. updated：候 view層才被重新渲染，數據更新
12. beforeDestroy 組件銷毀之前
案例：你確認刪除XX嗎？第二個：比如走馬燈文字，路由跳轉之后，因為組件已經銷毀了，但是setInterval還沒有銷毀，還在繼續后台調用，控制台會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。解決辦法：在組件生命周期beforeDestroy停止setInterval
13. destroyed ：當前組件已被刪除，清空相關內容 。實例銷毀后雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!
### 注意
> 1. vue實例中沒有el時鈎子，僅僅執行到了created ；有el時將可以按順序執行beforeCreate created beforeMount mounted幾個鈎子，沒有el選項，則停止編譯，也意味着暫時停止了生命周期，直到vm.$mount(el)
> 2. beforeUpdate 和 updated兩個鈎子會在data數據發生變化時進行調用，也就是說可以監聽data里面的所有數據，只有要變化就執行鈎子函數，重渲染（調用這兩個鈎子函數）的前提是被更改的數據已經被寫入模板中！！
eg {{number}}在模板中顯示，當只在js中對數據進行修改而沒有顯示在頁面上時將不會進行重渲染調用對應的鈎子函數
1. 對比watch：針對某一個數據進行監聽實時的；
2. 對比computed：當依賴項不變化時不會進行重新的執行，只有變化時才會再次執行
> 3. 在各個鈎子里面引用的this指向 vm 實例，即使在沒有mounted掛載在具體元素上時mounted之前的鈎子中打印this仍然有$el屬性，而在其后包括mounted鈎子里面單獨打印this.$el時是未定義的，但是斷點調試是符合的（此處有點不理解，希望有大神可以討論下）
分別在不同的鈎子函數里面打印data里面的變量和method里面的方法；
一定注意 var _self = this ;的操作
console.log('mounted-'+typeof _self.showTopTip);
console.log('mounted-'+typeof _self.showTip)
beforeCreate-undefined
beforeCreate-undefined
created-boolean
created-function
beforeMount-boolean
beforeMount-function
mounted-boolean
mounted-function
參考學習連接 ：
https://www.cnblogs.com/penghuwan/p/7192203.html
http://www.zhi-jie.net/vue2-study-mount/
https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html