vue 的生命週期再次理解

2021-09-14 00:34:30 字數 1251 閱讀 1416

重點1:

生命週期的鉤子函式,不能使用箭頭函式。

重點2:

每個週期的作用以及應用場景:

beforecreate: 資料渲染之前,data裡面的資料還沒賦值到定義的變數上,dom樹也沒有開始渲染。

應用場景:相當於剛進入頁面,可以加一些載入中的樣式,等待全部渲染完畢,再關閉載入中動畫。

create:資料渲染完畢,data裡面定義的變數開始有值,但dom樹依然沒有開始渲染。

應用場景:比如,需要依賴一些介面的資料來,渲染頁面,可以在這裡呼叫介面。

beforemount:data的資料都已經有值,dom也開始渲染,只是沒有渲染完畢。

應用場景:感覺跟create的週期差不多,因為即使在這裡有例項了,但依然是undefined。渲染頁面需要的資料,盡量在這之前,全部賦值完畢。

mounted:data的資料已經有值,dom全部渲染完畢。

應用場景:頁面全部渲染完畢,之後的操作,這個看實際應用來,常用的生命週期。

beforeupdate:在函式中操作更改資料,data的資料變化都會觸發這個鉤子,在這之前還可以再次更改資料,但這並不會造成頁面再次渲染,因為此時,對於vue來說,資料還沒真正改變 。

應用場景:這裡有這一種監聽資料變化的作用,也可以說是攔截,並修改,一般不建議這裡修改,資料變化就觸發,就有可能一直觸發,造成死迴圈。

update:資料更改完畢,dom也已經重新渲染完畢,執行該鉤子。

應用場景:更新完資料之後,統一需要執行的操作。如果只是改變 資料,dom沒有重新渲染是不會執行這裡的方法的。

beforedestory: 例項銷毀之前,我的理解是離開當前頁面之前,離開當前頁面之後就銷毀了,在這之前,定義的資料都可以用。

應用場景:設定的定時器,可以在此清除掉。離開頁面之前進行的一些操作。銷毀一些東西。

destroy:例項徹底銷毀,離開當前頁面跳到其他的頁面了。

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

Vue 生命週期的理解

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖 這些圖是網路的,侵權必刪beforecreate 元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做 新增一些行為此時的this,並不會指向例項物件 ...

vue生命週期的理解

vue有乙個完整的生命週期,是指從開始建立,初始化資料,編譯模板,掛載dom,渲染更新,銷毀一系列過程,我們稱這是vue的生命週期。通俗的講 vue的例項從建立到銷毀的過程就是vue的生命週期,同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己 的機會 beforec...