松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 完美解决vue之keep-alive页面缓存问题

完美解决vue之keep-alive页面缓存问题

迦娜王
1年前Vue
1,090 0 0

一:摘要:使用vue开发单页面应用,如何解决页面缓存问题(尤其在手机端),如何才能做到 新打开的页面 获取最新数据,返回上一个页面获取最新的缓存页面数据?

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

完美解决vue之keep-alive页面缓存问题

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

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

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

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

完美解决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之keep-alive页面缓存问题

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

  • html代码
完美解决vue之keep-alive页面缓存问题

  • js代码
完美解决vue之keep-alive页面缓存问题

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

完美解决vue之keep-alive页面缓存问题

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

完美解决vue之keep-alive页面缓存问题

0
「现场实录」 VueConf 2019 尤雨溪演讲总结
上一篇
五招让你快速成为Vue.js大师
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 0
  • 0
  • Top