vue中keep alive的用法及問題描述

2021-09-17 08:51:45 字數 995 閱讀 9292

1.keep-alive的作用以及好處

在做電商有關的專案中,當我們第一次進入列表頁需要請求一下資料,當我從列表頁進入詳情頁,詳情頁不快取也需要請求下資料,然後返回列表頁,這時候我們使用keep-alive來快取元件,防止二次渲染,這樣會大大的節省效能。

2.keep-alive的基本用法

需要快取的元件內容直接在router中新增:

meta:
3.keep-alive的生命週期

當引入keep-alive的時候,頁面第一次進入,鉤子的觸發順序created-> mounted-> activated,退出時觸發deactivated。當再次進入(前進或者後退)時,只觸發activated。

下面看下vue中 keep-alive 的使用問題及解決方案

問題描述

在業務開發中,會有路由跳轉但是返回需要保留資料的場景;vue 中提供了 keep-alive 來處理

解決方案

返回dom不讓其重新重新整理,在vue-view外麵包一層, 當引入keep-alive的時候,頁面第一次進入,鉤子的觸發順序created-> mounted-> activated,退出時觸發deactivated。當再次進入(前進或者後退)時,只觸發activated。

事件掛載的方法等,只執行一次的放在 mounted 中;元件每次進去執行的方法放在 activated 中; 

可以將 是否包裹 keep-alive 通過引數配置;

keep-alive>

//不需要重新整理的路由配置裡面配置 meta: , 這個路由則顯示在上面標籤;

//需要重新整理的路由配置裡面配置 meta: , 這個路由則顯示在下面標籤;

vue中keep alive的使用

1.beforecreate 2.created 3.beforemount 4.mounted 5.beforeupdate 6.updated 7.beforedestory 8.destroyed 9.errorcaptured 當捕獲乙個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數 錯誤...

vue中keep alive的使用

keep alive 是 vue 的內建元件,當它包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 transition 相似,keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素,也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中,防止重複渲染dom,減少載...

vue中 keep alive 元件的作用

在vue專案中,難免會有列表頁面或者搜尋結果列表頁面,點選某個結果之後,返回回來時,如果不對結果頁面進行快取,那麼返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜尋的結果列表,這時候就需要用到vue的keep alive技術了.keep alive是 vue 內建的乙個...