vue 生命週期鉤子的理解 watch computed

一  理解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

 

 

參考學習鏈接 ：

http://www.javashuo.com/article/p-gfficcpo-bg.html

http://www.zhi-jie.net/vue2-study-mount/

https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html