有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

vue 炮渣日记 4周前 (11-13) 40次浏览 已收录 0个评论 扫描二维码
一:摘要:使用vue开发单页面应用,如何解决页面缓存问题(尤其在手机端),如何才能做到 新打开的页面 获取最新数据,返回上一个页面获取最新的缓存页面数据?

二:页面打开和缓存流程:

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

三:为了解决上面的缓存流程问题,需要了解的知识:

1:keep-alive 组件; 说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;

  •  include 属性 说明: 只要include包含组件name则缓存下来; 官方解释:允许组件有 条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
  •  exclude 属性 说明: 只要exclude包含组件name则不缓存下来; 官方解释:组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

2: 路由配置参数中的 scrollBehavior 滚动行为,主要记录滚动位置的,我们不仅可以利用来记录缓存页面滚动的位置,还可以利用 savedPosition 知道页面到底是前进 还是 后退

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

3:vue 生命周期 中的 2个钩子 activated 和 deactivated

activated keep-alive 组件激活时调用 下面简单讲解下,建议看vue官方文档细致了解下

deactivated keep-alive 组件停用时调用 下面简单讲解下,建议看vue官方文档细致了解下

啥意思呢?如果不使用 keep-alive,我们经常在 created 中执行页面打开前的动作,比如:ajax获取数据;

不使用 keep-alive 打开页面 执行 created

使用 keep-alive 打开页面 执行 created 之后又会执行 activated ,如果此时返回上一页(就是缓存的页面)那么只执行 activated

再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子 ,如果返回到缓存的页面,此时缓存页面不执行 created了,如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中,放在created中无效;

四:互联网上我也看了有好几个解决方案,但都有问题,不是最佳方案,我研究vue源码后总结了完美方案,写出来,方便大家开发项目,互相学习+吐槽;

五:下面就用代码来演示步骤

第一步:router.js 新建路由

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

第二步:打开 APP.vue 页面 注意:这里的 cachePageName 一定是组件name,不是路由name(必须每个组件都加上name,组件name必须写成和路由name一样)

  • html代码
vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题
  • js代码
vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

第三步:这里需要用到vuex,如果没安装的请自行安装vuex,这里不做解释;

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题

第四步:修改路由中 scrollBehavior 滚动行为,在前进 和 后退 中动态删除 和 新增需要缓存的组件

vue清除keepalive缓存(完美解决)vue之keep-alive页面缓存问题
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

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