面試——Vue生命週期

話很少說直接上圖，這是一張高清圖，全部的精髓都在裏面

如下是我的理解

beforeCreate

1. 建立一個Vue實例，此時實例上只有一些生命週期函數和默認的事件
2. 此時data computed watch methods上的方法和數據均不能訪問

created

1. 能夠對data數據進行操做，可進行一些請求，請求不易過多，避免白屏時間太長。

beforeMount

1. 判斷el的掛載方式
2. 判斷是否有template設置
3. 將template進行渲染保存到內存當中，還未掛載在頁面上

mounted

1. 將內存中的模版掛載到頁面上
2. 此時能夠操做頁面上的DOM節點
3. 此時組件從建立階段進入運行階段

beforeUpdate

1. 頁面顯示的數據是舊的，此時data裏面的數據是最新，頁面數據和data數據暫未同步

updated

1. 根據data裏的最新數據渲染出最新的DOM樹，而後將最新的DOM掛載到頁面
2. 此時data和頁面數據一致，都是最新的

beforeDestroy

1. 此時組件從運行階段進入到銷燬階段
2. 組件上的data和methods以及過濾器等都出於可用狀態，銷燬還未執行

destroyed

1. 組件已經被徹底銷燬，組件中全部的數據、方法、指令、過濾器等，都已不可用

其餘鉤子

---

通常在用到keep-alive組件時會用到該activated和deactivated鉤子

activated

在加載對應模塊時會被調用，頁面第一次加載時也會被調用

deactivated

組件切換出去時被調用

errorCaptured

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

自定義指令提供的鉤子函數

---

bind

只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置

inserted

被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)

update

所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前

componentUpdated

指令所在組件的 VNode 及其子 VNode 所有更新後調用

unbind

只調用一次，指令與元素解綁時調用

機會只會留給有準備的人，加油！！！