vue缓存（vue缓存keepalive）

本篇文章给大家谈谈vue缓存，以及vue缓存keepalive对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue页面缓存设置，动态设置页面缓存
• 2、vue A、B、C三个页面keepAlive、include页面缓存问题
• 3、在Vue中如何缓存页面
• 4、移动端Vue界面缓存处理
• 5、vue 缓存组件keep-alive

vue页面缓存设置，动态设置页面缓存

情景：A页面—B页面—C页面，A页面去B页面期望B页面不缓存，B页面去C页面时，期望B页面可以被缓存。（实际场景可以是：A为首页，B为列表页，C为详情页，B滚动翻页后，从C返回B，记录滚动位置。）

通过路由访问钩子设置B页面的keepAlive为true或者false。

离开路由后，判断to.name是否是A的路由名，是的话设置为false,否则设置为true。注意滑闷B页面的keepAlive要设置为true。

2.通过vuex结合路由的includes功能以码让键及路由钩子函数实现迟巧。（推荐，实现起来优雅）

3.声明一个初始化页面状态，内部变量的函数，从a 页面进入执行初始化函数，其余情况不执行。视图依赖数据驱动，所以可以实现效果。

[img]

vue A、B、C三个页面keepAlive、include页面缓存问题

背景：

1、A列表页面 --- 跳转到 --- B填写页面 (B页面不行配要缓存)。

2、A列表页面 --- 跳转到 --- B填档慎指写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面，要显示 B页面之前填写的内容。

用vue-router中的孝隐keepAlive设置为true是不可行的。

注：：：：：以上这种方式是不行的。

可行方案：

结合keep-alive的include属性和vuex进行缓存。

这种方式不依赖于vue-router中的keepAlive值，那怕设置为false，也可以通过上面的方式进行页面缓存。

这样就OK了！！！

在Vue中如何缓存页面

在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的缓袜没情况还有很多，那么如何在Vue中控制页面是否刷新呢？

设置方法

注意：以上两种方法都可以对路由是否缓存进行设置，如果不论何好拦种情况下都要缓存页面，可以直接采用第一种方法，当然第二种情况同样可以满足情况；但是如果需要区分从不同页面跳转的情况来扰纳确定是否需要缓存的话，就需要用到第二种方法。

移动端Vue界面缓存处理

大家可以桐毁拦看到当重新进入列表页数据进行了刷新这明显不符合需求

查百度问同事知道了一个东西叫keep-alive于是决定使用这个内置组件试试.

然后吧发现问题确实能够得到结局但是出了个新问题如图:

问题1:界面虽然被缓存但是当退出到前一个页面再进入的时候界面还是被缓存状态,我觉得这是不合理的.

问题2:被缓存的界面从上个页面再次进入时动画效果不对.

基于这两个问题我也查了一些资料和博客,也总结了第二套方案

这个rank是用来判断当前组件所在的级别.

比如A组件-B组件 -C组件,那么A的rank为1,B的rank为2,C的rank为3,

在beforeRouteLeave中

这个貌似能解决问题,但是!!!

问题1: 这个返回动画就是不对...(图片在浏览器可能看不出啥问题,在真机很明显)因为这个框架是前端给的动画我也不会弄...如果能解决跳转动画问题,我觉得这个方案基本可以符合要求..如果有大佬可以解决,方便的话指导下小弟.而且能解决这个动画问题后面也不用看了...

问题二:有的时候会出现缓存了上一次的bug(也不知道咋回事...出现的还挺频繁..).

在这里就是我自己总结的一个方案..虽然能完美解决这些问题不过对开发不友好,维护成本太高..不建议使用(如果实在没办法的话)

首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)

先说下高度的滑动吧这个滑动的高度也是需要保存的.界面中沃使用cube-ui的scroll组件

给data增加一个scrollHeight属性缓存界面高度.还有需要缓存的数据model

当界面滑动停止调用scrollend方法对scrollHeight进行赋值

每次进入界面即在created 函数中取出缓存的高度,如果有高度那么让它自动滑动.并重新给scrollHeight进行赋值.

这边是我封装的一个js..实现是这样的

这样余并就可以局胡保证滑动的缓存(data与高度类似).

这是data的js

当界面进行跳转对组件的rank进行判断如下:

而在进入的时候

vue 缓存组件keep-alive

kee-alive 是 Vue 内置的一个组件旁祥， 可以使被包含的组件保留状态，或避免重新渲染 。也搭睁就是所谓的组件缓存

keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数

在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大运枝搏值(类型为字符或者数字,可以控制缓存组件的个数)

配合router使用

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。

2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。

3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。

4.包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。

参考

参考

关于vue缓存和vue缓存keepalive的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。