Vue的生命週期

大家，好久不見，部落格又好半年沒更了（怎乙個懶字了得）。話不多說，今天來**一下vue的生命週期。童鞋們肯定都知道： beforecreate, created, beforemount, mounted, beforeupdate, updated, beforedestory, destoryed。這些生命週期鉤子都是依次執行，無論你寫與否。但是具體了解每一步都做了什麼事麼，其實我也沒有很太清楚， 下面就讓我們來一起學習下。

1. 先讓我們來初始化個檔案

}			}

其次為什麼我要用 json.stringify 來列印， 是因為引用型別訪問的是記憶體位址，引用型別的屬性在修改後的值 和 修改前在控制台看到一樣的結果，這樣就無法區分引用型別的變化，所以我們用json.stringify 轉化為 string型別來比較。

2. 我們先來 寫出它的 beforecreate 和 created 函式，並列印出來 el, option, data的屬性

我們通過對比，可以知道

beforecreate 之前：初始化vue事件，並新增鉤子函式和新增屬性， $el未定義，$data也未繫結

從beforecreate -> created:  $data屬性進行雙向繫結， 但此時 $el 還是未定

3: 再來比較一下created和beforemount

通過對比，發現 $el 已經存在， 但是 當滑鼠移動到 控制台列印的div元素上，頁面並沒有顯示，說明此時還只是存在記憶體中（即虛擬dom）。

當我們 new vue 例項時， 不填寫 el 屬性時, 執行結果我們發現生命週期函式，只執行到了created。此時我們在頁面新增如下**，

settimeout(function

() , 2000)

再在new vue 中新增  

template: '',   render: function(createelement) ,

發現渲染結果 優先順序：render > template > outer html

這一階段首先判斷el選項，如果沒有el選項就停止生命週期，直到手動重新執行掛在方法，才會繼續向下； 如果有el選項，就繼續向下編譯。再判斷是否有 template 屬性， 如果有將template 編譯進render函式， 如果沒有則將el元素以及子元素作為模版。 如果有new vue物件時 有render 函式， 建立html

4. 下面我們看下 beforemount 和 mounted

通過我們在控制台觀察，他們的資料似乎是一樣的，但是 beforemount 中的el元素指向的是記憶體中的虛擬dom， 而mounted裡的el 指向的是真是dom，

所以這一階段是真實dom替換虛擬dom，並賦值

5 beforeupdate 和 updated

html的main標籤中新增 ,  js 新增兩個鉤子函式　　

beforeupdate() ,

updated() 

我們觀察看到， beforeupdate 中 $el 和 msg 都是更改之前的值， updated 是新值

6. beforedestory 和 destoryed

同理， beforedestory 在例項銷毀前呼叫，例項仍然可以用，

destoryed 例項銷毀，回歸塵土。

vue生命週期

beforecreate 元件例項剛剛被建立，屬性都沒有 create 例項已經建立完成，屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段，每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期，能幫助我們理解vue例項的運作機制，更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後，此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...