生命周期

趣味

一.創(chuàng)建/銷毀，緩存

1.created & beforeCreatebeforeCreate?實(shí)例未創(chuàng)建，調(diào)用不到data數(shù)據(jù)created?實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等，但尚未掛載? ?

created：在vue實(shí)例創(chuàng)建完成后被調(diào)用，這個過程已完成了數(shù)據(jù)的初始化，可以被訪問得到，也能獲得methods方法；這個過程可以修改數(shù)據(jù)，這也是渲染之前修改數(shù)據(jù)的機(jī)會。

2.destroyed & beforeDestroy

beforeDestroy 實(shí)例銷毀之前調(diào)用

destroyed 實(shí)例銷毀之后調(diào)用

在父組件中使用v-if來控制實(shí)例的銷毀和創(chuàng)建

應(yīng)用:主要在實(shí)例銷毀之前解綁一些使用addEventListener 監(jiān)聽的事件等?

3.updated & beforeUpdate

beforeUpdate 獲取數(shù)據(jù)更新前的原DOM

updated 獲取數(shù)據(jù)更新后的DOM；

掛載之后，vue的數(shù)據(jù)改變會引起頁面視圖的改變，此時觸發(fā)的是updated事件，而不是mounted(mounted只會在掛載實(shí)例的時候觸發(fā)調(diào)用一次)

應(yīng)用：獲取調(diào)試前后的DOM

4.mounted & beforeMount

beforeMount (實(shí)例創(chuàng)建完)el未掛載到實(shí)例上,獲取的是vue啟動前的最初DOM

mounted (實(shí)例創(chuàng)建完)并且el掛載到實(shí)例上后調(diào)用，獲取的是vue啟動后的DOM(執(zhí)行一次，之后的vue數(shù)據(jù)變化觸發(fā)updated)