vue的生命週期

2021-09-02 06:40:55 字數 816 閱讀 4199

1.beforcreate($el和$data並未初始化)

(1,2之間初始化事件,進行資料的觀測)

2.created(完成$data初始化,資料和data屬性進行繫結,data中屬性變化時,檢視也會改變)

(2,3之間判斷物件是否有el選項。若有就繼續向下編譯,若無則停止編譯,即停止生命週期,直到例項呼叫vm.$mount(el))

編譯過程中,如果有template選項,則將其作為模板編譯成render函式,若無,則將外部html作為模板編譯(優先順序:template模板 > outer html , 若有render函式,它是以createelement作為引數做渲染操作。  render函式選項優先順序高於前兩者)

3.beforemount

(3,4之間給vue例項物件新增$el成員,並且替換掉掛載的dom元素)

4.mounted(完成掛載,用來佔位的虛擬dom}在掛載時候真實值被渲染進去)

5.beforeupdate(資料變化時被呼叫,監聽到data的變化,但view層沒有被重新渲染,view層資料沒有變化)

(5,6之間data中資料發生變化觸發對應元件重新渲染)

6.updated

7.beforedestroy(例項銷毀前呼叫,這一步,例項仍完全可用)

(7,8之間解除安裝watchers,子例項及event listeners)

8.destroyed(vue例項銷毀後呼叫。呼叫後,vue例項指示的所有東西都會被解綁,事件***被移除,子元件全被銷毀)

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...