vue生命週期

官方生命週期圖

vue整個過程作了些什麼

要理解生命週期函數，咱們須要瞭解vue實例從生成到銷燬經歷了哪些過程

• 經過new Vue（）來建立一個實例空殼
• create
• mount
• update
• destroy

new Vue()建立實例

咱們都知道vue項目都是經過組件化進行實現的，一個頁面經過若干組件組成，構成一個組件樹，那麼每個組件都經過一個vue實例來進行管理，每當要渲染一個組件前，都會爲該組件建立一個vue實例來管理組件中的數據和事件方法。 經過new Vue()建立實例時，實際建立了一個vue實例的空殼，初始化生命週期和事件

注意：這時候實例中的data選項尚未數據，因此在beforecreated中沒法訪問到data中的數據

create

導入依賴項，將方法，data，計算屬性等等注入到實例當中

mount

在created後，beforemount前，會檢查el選項，沒有就會調用vm.$mount()，而後就會繼續檢查template，沒有的話就綁定el選項的html，進入beforemount後，編譯模板爲虛擬的DOM，，開始render，將虛擬DOM渲染到頁面上

update

當數據更新時，vue的虛擬dom機制會從新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比以後從新渲染

destroy

解除綁定，銷燬實例

生命週期鉤子

生命週期鉤子函數詳解

beforecreate

完成實例初始化，初始化非響應式變量 this指向建立的實例； 能夠在這加個loading事件； data computed watch methods上的方法和數據均不能訪問

created

實例建立完成 完成數據(data props computed)的初始化 導入依賴項。 可訪問data computed watch methods上的方法和數據 未掛載DOM,不能訪問ref爲空數組 可在這結束loading，還作一些初始化，實現函數自執行, 能夠對data數據進行操做，可進行一些請求，請求不易過多，避免白屏時間太長。 若在此階段進行的 DOM 操做必定要放在 Vue.nextTick() 的回調函數中

berofeMount

有了el,編譯了template|/outerHTML 能找到對應的template,並編譯成render函數

mounted

完成建立vm.ref 可在這發起後端請求，拿回數據，配合路由鉤子作一些事情； 可對DOM 進行操做

beforeUpdate

數據更新以前 可在更新前訪問現有的DOM,如手動移除添加的事件監聽器；

updated

完成虛擬DOM的從新渲染和打補丁； 組件DOM 已完成更新； 可執行依賴的dom 操做 注意：不要在此函數中操做數據，會陷入死循環的。

activated

在使用vue-router時有時須要使用來緩存組件狀態，這個時候created鉤子就不會被重複調用了， 若是咱們的子組件須要在每次加載的時候進行某些操做，可使用activated鉤子觸發

deactivated

for keep-alive 組件被移除時使用

beforeDestroy

在執行app.$destroy()以前 可作一些刪除提示，如：你確認刪除XX嗎？ 可用於銷燬定時器，解綁全局時間 銷燬插件對象

destroyed

前組件已被刪除，銷燬監聽事件 組件 事件 子實例也被銷燬 這時組件已經沒有了，你沒法操做裏面的任何東西了

子父組件的生命週期

僅當子組件完成掛載後，父組件纔會掛載 當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）父子組件在data變化中是分別監控的，可是在更新props中的數據是關聯的（可實踐）銷燬父組件時，先將子組件銷燬後纔會銷燬父組件兄弟組件的初始化（mounted以前）分開進行，掛載是從上到下依次進行當沒有數據關聯時，兄弟組件之間的更新和銷燬是互不關聯的mixin中的生命週期與引入該組件的生命週期是僅僅關聯的，且mixin的生命週期優先執行