vue父子元件渲染順序

2022-09-14 02:54:10 字數 774 閱讀 3366

beforecreate

created

beforemount

mounted

beforeupdate

updated

activated

deactivated

beforedestroy

destroyed

errorcaptured

總結:1.beforecreate執行時:data和el均未初始化,值為undefined

2.created執行時:vue 例項觀察的資料物件data已經配置好,已經可以得到data的值,但vue 例項使用的根 dom 元素el還未初始化

3.beforemount執行時:data和el均已經初始化,但此時el並沒有渲染進資料,el的值為「虛擬」的元素節點

4.mounted執行時:此時el已經渲染完成並掛載到例項上

5.beforeupdate和updated觸發時,el中的資料都已經渲染完成,但只有updated鉤子被呼叫時候,元件dom才被更新。

載入渲染過程

父beforecreate->父created->父beforemount->子beforecreate->子created->子beforemount->子mounted->父mounted

更新過程

父beforeupdate->子beforeupdate->子updated->父updated

銷毀過程

父beforedestroy->子beforedestroy->子destroyed->父destroyed

vue中父子元件先後渲染 vue父子元件傳值

先來說下父傳子吧,需要先在父元件中引用子元件 這種寫法是vue文件規定的,建議這樣寫,不清楚的可以看下文件。然後在子元件中用props物件接收一下中的msg,在把msg渲染到子元件中,這樣就完成了乙個簡單的父傳子 再說一下子傳父 在子元件中寫乙個方法passmsg 然後呼叫this.emit 第乙個...

Vue基礎 渲染函式 父子元件 傳遞資料

vue 測試版本 vue.js v2.5.13 div id myele level level myele child level level p para default p span slot span a span span div slot div a div div div slot f...

vue 改變父子元件mounted執行順序

最近在用vue做cesium地圖相關的東西,有乙個需求是這樣,乙個地圖為底圖,然後有乙個選單切換不同的業務場景 業務場景都是在地圖上做操作,打點,顯示一些懸浮框什麼的。原來的 是每一次切換都重新初始化一遍地圖,比較耗效能 需要請求大量的地圖資源 於是我想重構以下 簡單思路就是只初始化一遍地圖,業務頁...