Ⅰ 移动端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页面缓存（keepAlive）
同人博客搬迁~~~~（播客主页： https://www.cnblogs.com/epines/ ）
页面缓存在页面中长期会使用到，可以更快速的在页面切换期间的资源获取
主要是用keep-alive实现
在vue项目中，相关的写法比较多，还有一些注意点需要仔细
第一种方式
在App.vue中
添加标签
<keep-alive>
<router-view />
</keep-alive>
这会就是所有的页面都会被缓存
这里做了两个页面的相互跳转，分别写了一个输入框，在输入内容后，跳转时，输入的内容因为缓存的原因会被保留
如果存在某些页面需要缓存，那么可以通过keep-alive的属性去处理
其中就是include和exclude
include：名称匹配的组件才会被缓存，其中可以写字符串或正则表达式
exclude：名称匹配的组件不会被缓存，其中同样是字符串或正则表达式
这里的名称是指组件的名称
<script>
export default {
name: 'HelloWorld'
}
</script>
第二种方式：
在路由中进行设置通过添加meta，route/index.js
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 该路由会被缓存
}
},
{
path: '/ss',
name: 'ss',
component: Ss,
meta: { keepAlive:false // 该路由不会被缓存，不需要缓存的时候该属性可以不用写 }
}]
})
这时候页面还需要通过该属性进行判断是否缓存
在App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
这样写有个优点就是，需要缓存不需要缓存的name可以随便写，不需要做什么规律性的去写出一个合适的正则去匹配上，就会更加灵活些
常见的应用场景可以是，列表到详情页，从详情页返回到列表页，如果说列表页没有做缓存，在单页面下，会直接返回列表首页（存在分页的情况），就不能直接返回至之前离开的列表页，所以这个地方在列表页添加页面缓存后，可以做到返回至之前离开的列表页
没有缓存的时候，返回列表：
有缓存的时候，返回列表
所以从某些程度上来讲，即增加了页面的响应速度，又增加了用户体验，总体来说，还是比较实用的
Ⅲ Vue keep-alive本地路由缓存和图片懒加载
keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验，下图缓存整个路由视图(所有页面)，也可以缓存单个组件
图片懒加载用了 vue-lazyload 组件，npm安装：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之后在需要懒加载的图片上把src换成v-lazy
效果如图
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载，因为很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时，可以先显示一张loading的动态图，预先让用户有心理准备，否则打开后一片空白会使得用户体验变差。
Ⅳ vue项目中怎么缓存图片，可以使用<keep-alive></keep-alive>缓存图片吗，轮播图中怎么用
缓存图片是浏览器默认做的事情，你不需要任何操作。你不需要缓存的时候才需要添加一些信息。<keep-alive></keep-alive>是用来缓存路由的，缓存下来的路由再次进入和上次离开时的状态是一样的(不会再次触发created钩子)。
Ⅳ 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 页面进入执行初始化函数，其余情况不执行。视图依赖数据驱动，所以可以实现效果。
Ⅵ 在Vue中如何缓存页面
在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的情况还有很多，那么如何在Vue中控制页面是否刷新呢？
设置方法
注意：以上两种方法都可以对路由是否缓存进行设置，如果不论何种情况下都要缓存页面，可以直接采用第一种方法，当然第二种情况同样可以满足情况；但是如果需要区分从不同页面跳转的情况来确定是否需要缓存的话，就需要用到第二种方法。
Ⅶ Vue组件传值及页面缓存问题
关于父组件的传值类型和props更多的定义详见官网 ： vue官网
（2）子组件向父组件传值
（3）通过 chlidren等方法调取用层级关系的组件内的数据和方法。
有很多时候根据业务需求要在同级组件或页面间传值，此处提供以下几种方法作为参考:
（1）通过router-link进行跳转
（2） this.$router.push()
此方法同样是有path+query和name+params两种方式：
总结：使用query，传输的值会在url后面以参数的形式显示出来，可以刷新页面，数据不变，但会是页面路由过长；而params只要一刷新传递的参数就没了。
（3）LocalStorage缓存传值
注意：简单的小项目可以这么做，如果项目很大，建议直接用vuex。
（4）通过Vuex进行传值
（5）发布订阅模式（也叫eventBus或事件总线）
在Vue的原型上定义一个变量eventBus，所有所有Vue的实例或组件都将共享这个eventBus，可以用eventBus来发布自定义事件，然后在组件中用eventBus订阅自定义事件。就可以实现传值。
详细讲解可看 链接
（6）Vue.observable
index.vue组件中触发：
Vue中如何在切换组件过程中，将状态保存到内存中，防止DOM重新渲染，通俗的讲就是实现如何在一个页面输入部分数据后到了另一个页面再返回该页面，数据还在。
需求分析：Page1中录入信息，页面跳转带Page2，然后再返回Page1，之前Page1录入的信息还存在。
现在更改需求为：
首页是A页面
A页面跳转到B，B页面不需要缓存
B页面跳转到C，C页面不需要被缓存
C页面返回到B，B页面需要缓存
B页面返回到A，
A再次跳转到B
（1）此时思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive
beforeRouteLeave讲解
PageA页面：
PageB页面：
（2）用eventBus解决此问题
需要注意的一点是发布订阅第一次会无效，因为订阅的组件还没创建。解决方法就是首次进入pageB页面时接收pageA页面params里传递的参数。