vue 生命週期的理解

2022-08-20 19:30:08 字數 1845 閱讀 9292

vue的生命週期鉤子: beforecreate、created、beforemount、mounted、beforeupdate、update、beforedestroy、destroyed、activated、deactivated、errorcaptured;在 vue-v2.6 的版本中,又新增了 serverprefetch 鉤子;

在這個鉤子函式內,初始化了 inject、props、methods、data、computed、wacth、provied;所以在這個鉤子裡還不可以使用 this;

在這個鉤子函式內,將會掛在例項執行 vm.$mount(vm.$options.el)

因為在 beforecreate 鉤子內已經將資料進行了初始化,所以我們可以在這個鉤子內進行一些 data 例項資料的操作;對於 ajax 請求,通常由於有時候會在這個鉤子內對一些 data 資料進行操作,所以個人用的比較多一點,一般就將 ajax 請求放在了這個裡邊,其實對於 ajax 放在 created 還是 mounted 區別不是很大,因為 created 和 mounted 之間的時間差其實是可以忽略的,隊友有時候考慮的會引起二次渲染的問題,其實是沒必要去考慮的,因為 ajax 本身就是非同步的請求,一般就根據具體的需要去考慮將 ajax 放在**,和 react 一樣的,mounted 和 componentdidmount 這裡邊 dom 例項已經掛在,我們就可以對一些 dom 進行處理了

在這個鉤子內還可以使用 this;

在這個鉤子內是不可以使用 this 的,例項已經在 beforedestory 被銷毀;

activated 這個鉤子一般會配合著 keep-alive 來使用,用 keep-alive 進行元件的快取,再次進入元件的時候,就直接跳過前邊的鉤子函式不再重新執行,而直接執行 activated 鉤子;

這個鉤子在元件第一次渲染的時候會被呼叫,之後每次快取元件被啟用的時候呼叫;其呼叫機制就是,第一次呼叫的時候,是在 mounted 之後,beforerouterenter 守衛傳給 next 的**之前呼叫; 第二次呼叫的時候,因為元件被快取了,mounted 以及之前的都不再呼叫了,就直接從 activated 鉤子開始了;

該鉤子函式在 keep-alive 元件停用的時候呼叫,在伺服器渲染期間不被呼叫;

使用了 keep-alive 就不會呼叫 beforedestory 和 destoryed 鉤子了,因為元件沒有被銷毀,而是快取起來了,所以這個鉤子可以看做是 beforedestory 和 destoryed 的替代;

這個鉤子好像是 v2.5 的版本新加的,主要用來處理一些異常錯誤,基本不怎麼去使用

serverprefetch 的前身是 ssrprefresh;這個鉤子是用來處理 ssr 的;允許我們在渲染的過程中 「等待」 非同步資料,可以在任何元件中使用,而不僅僅是路由元件;

keep-alive 是 vue 原始碼中實現的乙個全域性抽象元件,即 vue 內建的乙個元件;通過自定義的 render 函式並且利用了插槽來實現資料快取和更新;所有的抽象元件是通過定義 abstract 選項來生命的;**元件不渲染真實的 dom,而且不會出現在父子關係的路徑上(initlifecycle 會忽略抽象元件)

我們在使用 keep-alive 的使用,通常都會使用到元資訊,即

這樣的話,我們難免的就是會多寫了幾串**,在vue2.1.0 之後,新增了兩個屬性: include、exclude 來有條件的快取路由和元件;

include:匹配的路由和元件會被快取;

ecclude: 匹配的路由和元件不會被快取;

如果有多個的話,可以用逗號進行分割開,也可以使用正則進行匹配,但是需要注意的是,使用正則的話,需要用到 v-bind 進行繫結;也可以使用陣列,使用陣列的時候也是要用 v-bind 進行繫結;

vue生命週期理解

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

Vue 生命週期的理解

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

vue生命週期的理解

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