Vue的11個(gè)生命周期

生命周期圖示.png

• 什么是生命周期鉤子？

  所有的生命周期鉤子自動(dòng)綁定 this 上下文到實(shí)例中，因此你可以訪問數(shù)據(jù)，對(duì)屬性和方法進(jìn)行運(yùn)算。這意味著你不能使用箭頭函數(shù)來定義一個(gè)生命周期方法 (例如 created: () => this.fetchTodos())。

  他們?cè)趯?duì)應(yīng)的階段做對(duì)應(yīng)的事。共分為8個(gè)階段，接下來一一介紹：

• beforeCreate

  1. 當(dāng)前生命周期是Vue初始化的時(shí)候執(zhí)行的鉤子函數(shù)，此時(shí)，data和methods還未將自身屬性和方法代理到Vue的實(shí)例上。因此，在當(dāng)前生命周期不能訪問data中的屬性和methods中的方法。

  2. 當(dāng)前生命周期在執(zhí)行時(shí)組件還未創(chuàng)建，因此，可以在當(dāng)前組件中進(jìn)行l(wèi)oading動(dòng)畫的顯示。

• created創(chuàng)建后*

  1. 當(dāng)前生命周期函數(shù)是組件在創(chuàng)建后執(zhí)行的，因此，可以在當(dāng)前生命周期中進(jìn)行前后端數(shù)據(jù)的交互。
  2. 當(dāng)前生命周期在執(zhí)行的時(shí)候，會(huì)將data的屬性進(jìn)行數(shù)據(jù)劫持，給每一個(gè)屬性添加getter和setter方法。
  3. 當(dāng)前生命周期在執(zhí)行時(shí)，會(huì)將data的屬性和methods的方法代理到Vue的實(shí)例中。

• beforeMount掛載前

  當(dāng)前生命周期是組件掛載在頁面之前會(huì)執(zhí)行的鉤子函數(shù)，數(shù)據(jù)也初始化完成，但是數(shù)據(jù)的雙向綁定還是顯示{{}}，可以在當(dāng)前生命周期中對(duì)數(shù)據(jù)進(jìn)行最后的修改。（這是因?yàn)閂ue采用了Virtual DOM（虛擬Dom）技術(shù)。先占住了一個(gè)坑。）

  當(dāng)前生命周期中的數(shù)據(jù)和模板還未進(jìn)行結(jié)合，因此，訪問不到真實(shí)的DOM結(jié)構(gòu)。

• mounted掛載后*****

  當(dāng)前生命周期在組件被掛載到頁面的時(shí)候執(zhí)行的函數(shù)，數(shù)據(jù)和模板已經(jīng)結(jié)合，在上一個(gè)周期占位的數(shù)據(jù)把值給渲染進(jìn)去?？梢栽谶@邊請(qǐng)求，不過created請(qǐng)求會(huì)更好一些?？梢酝ㄟ^this.$refs訪問真實(shí)的DOM結(jié)構(gòu)。

  場(chǎng)景：在當(dāng)前的生命周期函數(shù)中進(jìn)行的實(shí)例化（Swiper BScroll echarts）

  ref語法：

  1. 給需要獲取真實(shí)DOM結(jié)構(gòu)的元素添加ref屬性。（名字必須唯一）eg:<p ref="name"></p>
  2. 通過this.$refs.名字進(jìn)行訪問真實(shí)的DOM結(jié)構(gòu)

• beforeUpdate更新前*

  當(dāng)前生命周期函數(shù)中，只要是頁面數(shù)據(jù)改變了都會(huì)觸發(fā)，但更新的數(shù)據(jù)還未和模板結(jié)合，可以訪問到真實(shí)的DOM結(jié)構(gòu)，并且能夠?qū)Ω碌臄?shù)據(jù)的檢測(cè)和做最后的更改 。

• updated更新后*

  當(dāng)前生命周期函數(shù)中數(shù)據(jù)和模板已經(jīng)進(jìn)行相結(jié)合，可以在這里獲取最新的DOM結(jié)構(gòu)。

  如果在當(dāng)前生命周期函數(shù)中進(jìn)行實(shí)例化操作時(shí)，要進(jìn)行邊界條件的判斷，否則會(huì)造成性能消耗。

  new操作執(zhí)行的時(shí)候做了哪些事情？

  1. 開辟一塊內(nèi)存空間，創(chuàng)建一個(gè)空對(duì)象
  2. 將所創(chuàng)建的對(duì)象的__ proto __指向構(gòu)造函數(shù)的prototype
  3. 執(zhí)行構(gòu)造函數(shù)中的代碼，將this的指向，指向當(dāng)前的內(nèi)存空間
  4. 返回該對(duì)象（除非構(gòu)造函數(shù)中返回了一個(gè)對(duì)象或者函數(shù)）

• beforeDestory銷毀前*

  當(dāng)前生命周期會(huì)在組件被銷毀的時(shí)候去執(zhí)行，可以訪問到真實(shí)的DOM結(jié)構(gòu)，進(jìn)行事件的解綁，定時(shí)器的清除。

• destroyed()銷毀后

  在當(dāng)前生命周期斷開了與vue的關(guān)聯(lián)，訪問不到真實(shí)的DOM結(jié)構(gòu)。

  （對(duì)象停止并從內(nèi)存中刪除）

• keep-alive

  keep-alive是Vue的內(nèi)置組件，其中的生命周期只會(huì)走一遍，并且會(huì)增加activated和deactivaed生命周期，用以其他的業(yè)務(wù)邏輯。

  通常用來包裹動(dòng)態(tài)切換的路由或組件，防止組件頻繁地創(chuàng)建和銷毀，從而達(dá)到性能優(yōu)化的效果。

  • keep-alive常用的屬性

  include：字符串或正則表達(dá)式。匹配的組件會(huì)被緩存。

  exclude：字符串或正則表達(dá)式。匹配的組件都不會(huì)被緩存。

  max：數(shù)字。最多可以緩存多少組件實(shí)例。

• activated活躍狀態(tài)

  當(dāng)前組件顯示時(shí)執(zhí)行的生命周期

• deactivated緩存狀態(tài)

  當(dāng)前組件緩存時(shí)執(zhí)行的生命周期

• errorCaptured

  當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。

  此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。