Vue的11個生命周期

生命周期圖示.png

• 什么是生命周期鉤子鹊奖？

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

  他們在對應(yīng)的階段做對應(yīng)的事璧尸。共分為8個階段，接下來一一介紹：

• beforeCreate

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

  2. 當前生命周期在執(zhí)行時組件還未創(chuàng)建欢瞪，因此，可以在當前組件中進行l(wèi)oading動畫的顯示徐裸。

• created創(chuàng)建后*

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

• beforeMount掛載前

  當前生命周期是組件掛載在頁面之前會執(zhí)行的鉤子函數(shù)潜圃，數(shù)據(jù)也初始化完成缸棵，但是數(shù)據(jù)的雙向綁定還是顯示{{}}，可以在當前生命周期中對數(shù)據(jù)進行最后的修改谭期。（這是因為Vue采用了Virtual DOM（虛擬Dom）技術(shù)堵第。先占住了一個坑。）

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

• mounted掛載后*****

  當前生命周期在組件被掛載到頁面的時候執(zhí)行的函數(shù)鸳劳，數(shù)據(jù)和模板已經(jīng)結(jié)合狰贯，在上一個周期占位的數(shù)據(jù)把值給渲染進去∩屠可以在這邊請求涵紊，不過created請求會更好一些♂Ｃ可以通過this.$refs訪問真實的DOM結(jié)構(gòu)摸柄。

  場景：在當前的生命周期函數(shù)中進行的實例化（Swiper BScroll echarts）

  ref語法：

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

• beforeUpdate更新前*

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

• updated更新后*

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

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

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

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

• beforeDestory銷毀前*

  當前生命周期會在組件被銷毀的時候去執(zhí)行欣除，可以訪問到真實的DOM結(jié)構(gòu)，進行事件的解綁挪略，定時器的清除耻涛。

• destroyed()銷毀后

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

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

• keep-alive

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

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

  • keep-alive常用的屬性

  include：字符串或正則表達式。匹配的組件會被緩存太惠。

  exclude：字符串或正則表達式磨淌。匹配的組件都不會被緩存。

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

• activated活躍狀態(tài)

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

• deactivated緩存狀態(tài)

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

• errorCaptured

  當捕獲一個來自子孫組件的錯誤時被調(diào)用。

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