keep-alive遇到的坑

最近在做优化的时候，为了避免组件多余的重复渲染，用vue提供的keep-alive缓存组件，基本用法很简单

app.vue中


<keep-alive><router-view v-if="$route.meta.keepAlive"><!-- 这里是会被缓存的视图组件 --></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"><!-- 这里是不被缓存的视图组件 -->

router.js

需要缓存的组件meta对象加keepAlive:true

{path: "/ProjectDetail",name:'ProjectDetail',component: ProjectDetail,meta:{keepAlive:true,}

到这里，看似目的达到了，缓存的页面不会重新渲染，但是有一个问题，组件缓存了之后，任何时候都不会重新加载，而实际的需求却不是这么简单粗暴，举个例子，A-B-C三个层层递进的页面，A是首页，B是搜索页面，C是通过搜索列表进入的详情页面，从A进入B再进入C，返回B页面，想要展示 B页面之前的状态，但是从A再进入B页面，不想进入B的缓存页面,经过琢磨，想到了组件内的路由钩子应该能解决这个问题，于是进行尝试

方案一

   A页面写了beforeRouteLeave(to, from, next) {to.meta.keepAlive = false;next();}
C页面写了
beforeRouteLeave(to, from, next) {to.meta.keepAlive = true;next();}

这样改完之后试了一下，果然从 B到C,再返回B用了缓存页面，再回到A去B,重新创建了B的实例，但是再次操作，发现B组件再怎么设置keep-alive都无法缓存了

今天看了下keep-alive源码，证实了meta.keepAlive=true这种方法，解决不了条件缓存问题
原因：在keep-alive源码中，include和exclude是被watch的，当发生变化时，keep-alive会去校验cache里是否匹配，匹配不上的会被删除。也就是说，官方是为这种情况做了处理的。而meta这种方法，因为没有存在某种类似于watch的方法，导致这种方法天然是和实际cache里面的内容有出入的，所以可定会存在各种奇怪的bug。

经过各种查资料，又尝试了方案二

方案二
利用include,动态添加"B"

1.app.vue

<keep-alive :include="catchList"><router-view></router-view>
</keep-alive>

这里的catchList，是vuex维护的需要缓存的组件名的一个数组

2、在路由中加入

router.beforeEach((to, from, next) => {if (to.name === 'B') {store.commit('keepAlive', 'B')}next()
})

3、在b.vue中加入

beforeRouteLeave (to, from, next) {if (to.name !== 'C') {this.$store.commit('noKeepAlive')}next()}

4.在vuex中mutation

keepAlive(state, component) {!state.catchList.includes(component) &&state.catchList.push(component)},noKeepAlive(state) {state.catchList = []}

大致的原理是，只要是B的组件，都缓存。只有当从B>A的时候，才让B不缓存。
亲测同原理，但是meta.keepAlive会出现其他bug
所以，目前来看，能用的方法，其实只有这一种。

keep-alive遇到的坑相关推荐

ES-PHP向ES批量添加文档报No alive nodes found in your cluster
ES-PHP向ES批量添加文档报No alive nodes found in your cluster 2016年12月14日 12:31:40 阅读数:2668 参考文章phpcurl 请求Chu ...
i/o timeout ，希望你不要踩到这个net/http包的坑
问题我们来看一段日常代码. 1package main23import (4 "bytes"5 "encoding/json"6 "fmt" ...
总是收到 i/o timeout 报错，这里有 HTTP 的避坑指南！
[CSDN 编者按]HTTP协议可以说是开发者最熟悉的一个网络协议,简单易懂和易于扩展两个特点让它成为应用最广泛的应用层协议.虽有诸多优点,但是协议定义时因为诸多博弈和限制,还是隐藏了不少暗坑,让人一 ...
Kubernetes ~ k8s 从入门到入坑。
Kubernetes ~ k8s 从入门到入坑. 文章目录 Kubernetes ~ k8s 从入门到入坑. 1. Kubernetes 介绍. 1.1 应用部署方式演变. 1.2 kubernete ...
记录学习npm私服的搭建与使用以及过程中的坑点
目录前言一.私服的选择以及前奏二.搭建步骤 1.下载插件 2.守护进程启动 3.自定义组件上传测试 4使用自定义的组件总结前言之前学习搭建了maven私服的插件制作上传,之后联想到vue的 ...
阿里云centos环境之linux上redis安装及踩过的坑(七)
阿里云centos环境之linux上redis安装及踩过的坑<七> 文章目录阿里云centos环境之linux上redis安装及踩过的坑<七> 第一:下载上传第二:解压安装 ...
问题定位 | XtraBackup 8.0 数据重建避坑事件始末
作者:卢文双资深数据库研发工程师目前负责青云云数据库的研发工作,热衷于研究主流数据库架构.源码,对关系型数据库 MySQL/PostgreSQL 及分布式数据库有深入研究. 前言在为 Xenon ...
Go 语言踩坑记——panic 与 recover
题记 Go 语言自发布以来,一直以高性能.高并发著称.因为标准库提供了 http 包,即使刚学不久的程序员,也能轻松写出 http 服务程序. 不过,任何事情都有两面性.一门语言,有它值得骄傲的优点, ...
C++游戏 Alive系列图鉴少量攻略
C++游戏 Alive系列图鉴&少量攻略 11月5号这款c++小游戏 Alive 更新了NOIP前的最后一个版本从1.0到5.1 Alive开发组经历了风风雨雨在此我代表@四向搜 @X ...
11g Grid Control安装过程的一些“坑”
Oracle提供的图形化管理工具目前主要有三个版本: EMDC:Enterprise Manager Database Control EMGC:Enterprise Manager Grid Con ...

keep-alive遇到的坑

keep-alive遇到的坑相关推荐

最新文章

热门文章