Ⅰ vue 路由缓存
在写一个移动端项目时遇到了一个问题，每一个tab栏所对应的页面被封装成一个组件进行
复用，结果会导致他们共用一个滚动条。解决办法是给这个子组件加固定的高度（例如
height:100vh），同时加一个属性overflow-y:auto，这样就可以解决这个问题。之后发现每当进
入主页中任意一篇文章再退出时，页面重新加载渲染了，之前的文章消失了，所有在这里想到
了路由缓存。
先说一下keep-alive的属性和用法。
Props ：
用法 ：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
（只有被<keep-alive>包裹的组件才具有这两个钩子函数）
其实不太建议使用include的，因为如果多个组件中都包括include中匹配到的组件，想单独
的让其中某个组件缓存是不太方便的。所以可以在分发路由时，在需要缓存的路由中把额外标
记的属性写在meta中，如图1。
使用的时候可以在根组件中通过$route.meta.keepAlive取到该值，然后进行v-if判断即可，如图
2，这样使用起来相对灵活一点。
使用keep-alive缓存路由后，已经解决了主要问题，但是有新的问题出现。缓存过的组件重
新被激活时不会记录滚动条的状态，默认置顶，所以应该监听这个被复用的组件的onscroll事
件，动态记录滚动条的位置状态，然后重新赋值给scrollTop（如果还想优化最好给滚动事件来
一个防抖处理）。那么问题来了，应该在何时重新赋值呢？上面用法中提到了当组件在<keep-
alive> 内被切换时会触发activated这个钩子函数，所以应在这里赋值。
Ⅱ 移动端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本地路由缓存和图片懒加载
keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验，下图缓存整个路由视图(所有页面)，也可以缓存单个组件
图片懒加载用了 vue-lazyload 组件，npm安装：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之后在需要懒加载的图片上把src换成v-lazy
效果如图
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载，因为很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时，可以先显示一张loading的动态图，预先让用户有心理准备，否则打开后一片空白会使得用户体验变差。
Ⅳ 在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里传递的参数。
Ⅵ Vue 怎么缓存当前的组件缓存后怎么更新说说你对keep-alive的理解是什么
keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 可以设置以下 props 属性：
关于 keep-alive 的基本用法：
使用 includes 和 exclude ：
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（ activated 与 deactivated ）：
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive
举个栗子:
当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ，这时候列表页应该是需要 keep-alive
从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive
在路由中设置 keepAlive 属性判断是否需要缓存
使用 <keep-alive>
keep-alive 是 vue 中内置的一个组件
源码位置：src/core/components/keep-alive.js
可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数
this.cache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：
在组件销毁的时候执行 pruneCacheEntry 函数
在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：
如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：
在该函数内对 this.cache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可
关于 keep-alive 的最强大缓存功能是在 render 函数中实现
首先获取组件的 key 值：
拿到 key 值后去 this.cache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：
直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 this.keys 中最后一个
this.cache 对象中没有该 key 值的情况，如下：
表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 this.cache 中，并且把 key 存入 this.keys 中
此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ，如果超过了，则把第一个缓存组件删掉
解决方案可以有以下两种：
每次组件渲染的时候，都会执行 beforeRouteEnter
在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子
注意：服务器端渲染期间 avtived 不被调用
Ⅶ 如何解决h5、vue、uniapp等项目缓存问题
我们再开发web项目时，经常会遇到修改了css、js、html等静态文件，并部署到服务器之后。使用浏览器进行访问的时候，发现并没有什么变化，这就是静态缓存。我们应该如何处理静态缓存呢？首先我们先了解什么是静态缓存。
html文件添加Expires时间
CDN是静态缓存加速最典型的代表。CDN技术并不是一门新的技术，它是基于传统 nginx、squid、varnish 等 web 缓存技术，结合 DNS 智能解析的静态缓存加速技术。
方式二：
uniapp解决缓存的方式与vue一样，但是uniapp兼容了很多平台，所以修改vue.config.js又不太一样。如果uniapp根目录下面没有vue.config.js，则新建vue.config.js文件即可。
Ⅷ 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 页面进入执行初始化函数，其余情况不执行。视图依赖数据驱动，所以可以实现效果。