[前端] Vue3 keepalive失效卡顿 | 祭夜博客
  • 欢迎光临,这个博客颜色有点多

[前端] Vue3 keepalive失效卡顿

JavaScript msojocs 1年前 (2023-03-31) 737次浏览 已收录 0个评论 扫描二维码

一开始这么写的:


        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

没问题,但是由于有同组件多路由复用的情况,复用只有一个缓存;
这就导致多个页面切换时要重新加载数据,不友好。

然后,就按网上说的的加了个key这么写:


        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" :key="$route.fullPath" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

好家伙,变卡了,每次都触发onMounted #(流汗滑稽)

看一下结构:
[前端] Vue3 keepalive失效卡顿

对比有缓存的:
[前端] Vue3 keepalive失效卡顿

?这。。。这不对吧 #(流汗滑稽)

根据有缓存的结构,key应该加在keepalive里面一层:

<!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="$route.fullPath" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

舒服了,多组件复用都缓存了:
[前端] Vue3 keepalive失效卡顿


祭夜の咖啡馆 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:[前端] Vue3 keepalive失效卡顿
喜欢 (1)
[1690127128@qq.com]
分享 (0)
发表我的评论
取消评论
OwO表情
贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址