vue生命週期

2021-10-08 09:56:19 字數 3648 閱讀 7247

vue生命週期

vue生命週期一共8個階段

1、beforecreate(建立前)

2、created(建立後)

3、beforemount(載入前)

4、mounted(載入後)

5、beforeupdate(更新前)

6、updated(更新後)

7、beforedestory(銷毀前)

8、destroyed(銷毀後)

vue第一次頁面載入會觸發以下幾個鉤子函式:

beforecreate、created、beforemount、mounted

dom在mounted中就已經完成

1 .在mounted裡面修改data裡面的資料,並不是想要的直接就拿mounted裡面的修改過的值渲染介面,而是還會先拿data裡面的初始值進行渲染,然後走beforeupdate這裡拿新的資料進行渲染

2 .這是不是說如果想要修改data裡面的資料,要在beforemounted的時候修改呢

3 .其實beforemounted也是先按照預設值進行渲染,如果beforemounted裡面修改資料比較慢的話,他是不會等著的,還是會直接執行下乙個生命週期函式。也就是說所有的生命週期函式之間沒有done的操作

4 .如果在beforemounted裡面加乙個setinterval()來延遲修改值的話,也會觸發beforemounted函式

5 .往下看其實發現在mounted生命週期之前修改data裡面的資料都是在修改虛擬dom,直到mounted之後任何修改才會被渲染到頁面上。

6 .所以理論上只要在mounted之前修改資料都行,比如mounted裡面進行ajax請求,也是這個原理

7 .這個還需要再看下原始碼,應該就能記得比較清楚

8 .掛載頁面。

beforecreate

1 .進行初始化事件,this指向建立的例項

2 .不能訪問到data

3 .不能訪問computed

4 .不能訪問watch

5 .不能訪問methods

6 .以上的方法和資料

7 .用來初始化非響應變數

created鉤子

1 .例項建立完成

2 .資料已經和data屬性繫結,此時放在data中的屬性值發生改變的同時,檢視也會改變

3 .可以初始化ajax請求了

4 .可以訪問data

5 .可以訪問computed

6 .可以訪問watch

7 .可以訪問methods

8 .可以訪問到以上的方法和資料

9 .未掛載到dom

10 .不能訪問到ref屬性內容為空陣列

beforemount

1 .判斷是否有el選項,有就繼續,沒有就停止編譯,除非呼叫vm.$moune(el)

2 .是否有template引數選項

1 .有template引數選項,將模板編譯為render函式

2 .沒有template選項,將外部html作為模板編譯

3 .template中的模板優先順序要高於outer html的優先順序

//有template屬性的時候這個就不會被渲染了

這裡插入**片

3 .如果vue物件中還有乙個render函式的話,那麼又會先渲染render函式裡面的內容。所以這是有優先順序的

4 .模板編譯完成,但是未掛載,無法獲取dom

5 .給例項物件新增el成

員6.在掛

載開始前

被呼叫,

在bef

orem

ount

之前,會

找到對應

的tem

plat

e,並編

譯成re

nder

函式mo

unte

d1.在m

ount

ed之前

還是通過

mess

age進

行佔位的

,因為還

沒有掛載

到頁面上

,還是在

js中以

虛擬do

m形式存

在的2.m

ount

ed之後

換成了我

們想要的

樣子3.實

例掛載到

dom上

,此時可

以通過d

omap

i獲取到

dom節

點。4.el成員 6 .在掛載開始前被呼叫,在beforemount之前,會找到對應的template,並編譯成render函式 mounted 1 .在mounted之前還是通過}進行佔位的,因為還沒有掛載到頁面上,還是在js中以虛擬dom形式存在的 2 .mounted之後換成了我們想要的樣子 3 .例項掛載到dom上,此時可以通過dom api獲取到dom節點。 4 .

el成員6.

在掛載開

始前被調

用,在b

efor

emou

nt之前

,會找到

對應的t

empl

ate,

並編譯成

rend

er函式

moun

ted1

.在mo

unte

d之前還

是通過m

essa

ge進行

佔位的,

因為還沒

有掛載到

頁面上,

還是在j

s中以虛

擬dom

形式存在

的2.m

ount

ed之後

換成了我

們想要的

樣子3.

例項掛載

到dom

上,此時

可以通過

doma

pi獲取

到dom

節點。4

.ref屬性可以訪問

5 .常用於獲取vnode資訊ajax請求

beforeupdate

1 .當data中的資料發生了改變,會觸發對應元件的重新渲染

2 .響應式資料更新時呼叫,發生在虛擬dom打補丁之前

3 .適合在試圖更新之前訪問現有dom,比如手動移除或者新增事件***

updated

1 .虛擬dom重新渲染和打補丁之後呼叫,元件dom已經更新,可執行依賴dom的操作

2 .避免在這個鉤子中運算元據,不然可能陷入死迴圈

beforedestory

1 .例項銷毀之前呼叫,這一步例項仍然可以使用,this仍然可以獲取例項

2 .常用於銷毀定時器,解綁全域性事件,銷毀外掛程式物件等操作

destoryed

1 .例項銷毀之後呼叫,呼叫後,vue例項指示的所有東西都會解綁,所有事件***都會被移除,所有子例項也會被銷毀、

注意1 .created階段的ajax請求和mounted階段請求的區別:前者頁面未出現,如果請求訊息太多,頁面會長時間處於白屏狀態

2 .mounted不會承諾所有的子元件也都一起被掛載。如果希望等到整個檢視都被渲染完畢,可以使用this.$nexttick

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