快捷導(dǎo)航

vue3.0中的keep-alive使用及說(shuō)明

更新時(shí)間：2023年05月20日 14:21:39 作者：jiahao778

這篇文章主要介紹了vue3.0中的keep-alive使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

keep-alive

用法

keep-alive是vue中的一個(gè)內(nèi)置組件，通常用它來(lái)包裹一個(gè)動(dòng)態(tài)組件，keep-alive 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。

它有兩個(gè)特殊的生命周期鉤子activated 和 deactivated，在vue3.0里面生命周期函數(shù)前面都要加上on,onActivated,onDeactivated。

當(dāng)組件在使用了keep-alive包裹時(shí)，正常的生命周期函數(shù)mounted和unmounted將不會(huì)執(zhí)行，取而代之的是為它新增的這個(gè)兩個(gè)特殊鉤子函數(shù)。

vue3.0生命周期圖：

![Alt](https://img-home.csdnimg.cn/images/20220524100510.png

屬性

include：只有名稱匹配的組件會(huì)被緩存；類型可以是數(shù)組、字符串或者正則。
exclude：名稱匹配的組件不會(huì)被緩存；類型可以是數(shù)組、字符串或者正則。
max：最多可以緩存多少組件實(shí)例。

vue3中使用

vue3中的寫法和vue2中稍微有點(diǎn)不同，具體代碼可以參考下方：

<router-view v-slot="{ Component, route }" id="pageWrapper">
    <transition :name="transitionName" mode="out-in">
      <keep-alive :include="cacheRouter">
        <component :is="Component" />
      </keep-alive>
    </transition>
 </router-view>

設(shè)置被緩存的路由可以直接寫死，把需要緩存的路由name寫到一個(gè)數(shù)組中，這樣最簡(jiǎn)單粗暴，不過(guò)不靈活，不建議使用這種方式

cacheRouter: ['home', 'order'];

通過(guò)設(shè)置路由原信息

在需要被緩存的組件的meta里面添加keepAlive標(biāo)記

export const routes: RouteRecordRaw[] = [
  {
    path: '/myLogin',
    name: 'myLogin',
    component: () => import('@/views/login/login.vue'),
    meta: {
      title: '登錄',
      index: 1,
      keepAlive: true,
    },
  },
];
let cacheList: any[] = [];
const keepAliveView = (_route: RouteRecordRaw[], _cache: RouteRecordName[]): void => {
  _route.forEach((item) => {
    item.meta?.keepAlive && item.name && _cache.push(item.name);
  });
};
//routes 路由配置數(shù)組
keepAliveView(routes, cacheList);
export default cacheList;

vue3.0與vue2.0中keep-alive的用法區(qū)別

vue2.0

? ? <keep-alive>
? ? ? <router-view />
? ? </keep-alive>

vue3.0

? ? <suspense>
? ? ? <router-view v-slot="{ Component }">
? ? ? ? <keep-alive>
? ? ? ? ? <component :is="Component" />
? ? ? ? </keep-alive>
? ? ? </router-view>
? ? </suspense>

注意點(diǎn)

如果 router-view 嵌套的子組件里面還有router-view, 那么子組件里面也要加上keep-alive

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
深度了解vue.js中hooks的相關(guān)知識(shí)
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識(shí)，生命周期鉤子提供了一些方法，因此你可以在組件生命周期的不同時(shí)刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時(shí)，組件會(huì)被創(chuàng)建，反之會(huì)被銷毀。,需要的朋友可以參考下
2019-06-06
vue 2.0組件與v-model詳解
這篇文章主要介紹了vue 2.0組件與v-model的相關(guān)資料，文中介紹的非常詳細(xì)，本文適合初學(xué)組件編寫的同學(xué)閱讀，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-03-03
Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹
這篇文章主要介紹了Vue項(xiàng)目業(yè)務(wù)邏輯，不同的項(xiàng)目有不同的功能，不同的功能需要不同的實(shí)現(xiàn)，實(shí)現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說(shuō)業(yè)務(wù)邏輯是指一個(gè)實(shí)體單元為了向另一個(gè)實(shí)體單元提供服務(wù)，應(yīng)該具備的規(guī)則與流程
2022-11-11
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開(kāi)發(fā)工作過(guò)程中，我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下
2022-11-11
使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue路由切換時(shí)取消之前的所有請(qǐng)求操作
這篇文章主要介紹了vue路由切換時(shí)取消之前的所有請(qǐng)求操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
詳解vue過(guò)濾器在v2.0版本用法
本篇文章主要介紹了vue過(guò)濾器在v2.0版本用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03