Vue元件的生命週期

2022-06-10 05:48:07 字數 1052 閱讀 6787

1.建立;2.掛載;3.更新;4.銷毀

1,元件初始化的時候會執行哪些生命週期函式?

beforecreate created beforemount mounted

2,哪些生命週期函式會執行多次

beforeupdate updated

beforecreate:

當元件例項化的時候,做了乙個初始化操作,注意當前生命週期是元件還沒有例項化完畢,因此你是訪問不到當前元件的data或者methods屬性和方法以及其他生命週期函式

場景:初始化的loading

created:建立後

①當created執行完畢後,會將data以及methods身上所有的屬性和方法通過遍歷新增到vm的例項身上

②created生命週期函式中會將data身上所有的屬性都新增上乙個getter/setter方法。讓data的屬性具有響應式的特性

③場景:當前生命週期函式中可以用來進行ajax資料的請求

beforemount:掛載前

①資料和模板還未進行結合,可以對資料做最後的一次處理

②在這個生命週期函式中是訪問不到真實的dom結構

mounted:掛載後

①資料與模板進行結合生成真實的dom樹

②在這個生命週期函式中我們可以通過this。$refs.屬性名稱獲取到真實的dom結構並對其進行處理

③一般情況下我們都會在當前生命週期函式中做方法的例項化

beforeupdate:更新前

①更新的資料和模板還為進行結合,可以對資料做最後的修改

②在當前生命週期函式中也可以獲取到真實的dom結構

updated:更新後

①更新的資料和模板進行相結合,在這個生命週期函式中我們可以獲取到更新後的dom結構,以及對資料的更新做乙個監聽

beforedestroy:銷毀前

①在當前生命週期函式中依舊是可以訪問到dom結構的

②使用場景:做一些事件監聽的解釋。

destroyed:銷毀後

①在當前生命週期函式中訪問不到真實的dom結構了

②在這個生命週期中會將當前vm與dom之間的關聯全部斷開

vue元件生命週期

beforecreate建立前 created建立後 beforemountvue裝載dom之前 mountedvue裝載dom之後 beforeupdate資料改變出發,改變前 updated資料改變出發改變後 beforedestory元件銷毀前 destoryed元件銷毀後 beforeact...

Vue元件的生命週期

有乙個需要是分別在建立b元件和b bro元件時利用事件匯流排 on 註冊 乙個事件,在銷毀元件前 off 登出 這個事件,開始我是分別在created中 on,在beforedestory中 off,但是發現b bro中的事件註冊不上該事件,最後發現是生命週期的原因 b bro beforecrea...

vue元件的生命週期

beforecreate 實列建立之前。created 實列建立完成。beforemount 掛載開始之前被呼叫。mounted 實列掛載到dom上 beforeupdate 響應式資料更新時呼叫 updated 虛擬dom重新渲染和打補丁之後呼叫 beforedestroy 實列銷毀之前呼叫 de...