vue3.0中的keep-alive使用及說明

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

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

keep-alive

用法

keep-alive是vue中的一個內置組件，通常用它來包裹一個動態(tài)組件，keep-alive 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。

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

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

vue3.0生命周期圖：

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

屬性

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

vue3中使用

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

<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>

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

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

通過設置路由原信息

在需要被緩存的組件的meta里面添加keepAlive標記

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>

注意點

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