Vue的生命週期函式

首先，我們來明白什麼是生命週期。

var vm=

newvue
()

接下來我們初始化vue的例項物件

beforecreate()

,

這時候我們會得到如下結果

表明在beforecreated生命週期執行的時候data和methods中的資料都還沒有初始化

created是我們遇到的第二個週期函式，這裡data和methods都已經被初始化好了。

created()

所以我們如果要對data中的資料或者methods中的方法進行操作，最早，只能在created中進行。

這是我們遇到第三個生命週期函式，表示模板已經在記憶體中編輯，但是還沒有把模板渲染到頁面中去。

beforemount()

}  表示還沒有把模板渲染到頁面中去
//在beforemount 執行的時候，頁面中的元素，還沒有被真正的替換過來，只是之前寫到的一些模板字串
},

我們可以輸出下結果看到還並沒有把模板渲染到頁面中去。在beforemounted執行的時候，頁面中的元素，還沒有被真正的替換過來，只是之前寫到的一些模板字串

這是我們遇到的第四個生命週期函式，表示記憶體中的模板，已經真正的掛載到了頁面中，使用者已經可以看到渲染好的頁面。

mounted()

,

注意 ：mounted是例項建立 的最後乙個生命週期，當執行完methods 就表示例項已經被完全的建立好了，此時，如果沒有其他操作的話，這個例項，就靜靜的躺在我們的記憶體匯中，一動不動。

接下來的兩個事件是執行中的事件

beforeupdate()

,

結論： 當執行beforeupdated事件的時候，頁面中顯示的資料還是舊的，此時data中的資料時最新的，頁面上尚未和最先的資料保持同步

updated()

,

這是執行事件中的最後乙個事件，可以看到updated事件執行的時候，頁面和data的資料已經保持同步了，都是最新的。

當只想beforedestory鉤子函式時，vue就已經從執行階段，進入到了銷毀階段；

當執行beforedestory的時候，例項身上所有的data和methods，以及過濾器，指令等都出於可用狀態，此時還沒有真正執行銷毀的過程。

當執行到destoryed函式的時，元件已經被完全的銷毀了，此時元件中所有的資料、方法、指令、過濾器都已經不可用了。

上面就是vue的生命週期函式，beforecreate、created、beforemount、mounted是例項建立階段、beforeupdate、updated是執行階段、beforedestory、destoryed是銷毀階段。

vue 生命週期函式

什麼是生命週期 從vue例項建立 執行 到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命週期！生命週期鉤子 就是生命週期事件的別名而已 生命週期鉤子 生命週期函式 生命週期事件 主要的生命週期函式分類 建立期間的生命週期函式 beforecreate 例項剛在記憶體中被建立出來，此時，還沒...

vue 生命週期函式

每個鉤子函式都在什麼時間觸發 1.beforecreate 在例項初始化之後，資料觀測 data observer 和 event watcher 事件配置之前被呼叫。2.created 3.beforemount 在掛載開始之前被呼叫 相關的 render 函式首次被呼叫。4.mounted el...

vue生命週期函式

從vue例項建立 執行到銷毀期間總會伴隨各種各樣的事件，這些事件統稱為生命週期。1 beforecreate 在beforecreate生命週期執行的時候，data和method中的資料都還沒有被初始化。2 ceated 在created中data和methods都已經初始化好了。3 beforem...