㈠ 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组件传值及页面缓存问题
关于父组件的传值类型和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中如何缓存页面
在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的情况还有很多，那么如何在Vue中控制页面是否刷新呢？
设置方法
注意：以上两种方法都可以对路由是否缓存进行设置，如果不论何种情况下都要缓存页面，可以直接采用第一种方法，当然第二种情况同样可以满足情况；但是如果需要区分从不同页面跳转的情况来确定是否需要缓存的话，就需要用到第二种方法。
㈣ vue使用keep-alive实现页面前进刷新,后退缓存
vue中,我们有时候需要实现这种场景:
1.搜索页面到列表页面，需要刷新重新获取数据。
2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：
第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive
第二步:在App文件中如下设置
第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:
第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:
这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。
㈤ 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中keep-alive，快速实现页面缓存
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
缓存所有页面
根据条件缓存页面
1.在 router 目录下的 index.js 文件里
1. activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用
2. deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
㈦ 如何解决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 路由缓存
在写一个移动端项目时遇到了一个问题，每一个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 项目缓存问题
最直接的方案是：Ctrl+Shift+Delete 清缓存，世界瞬间安静了，但是用户是上帝，再说谁没事会去清缓存。
网上常见的解决方案：
vue项目中缓存问题
解决Vue入口文件index.html缓存问题
vue项目如何让客户端（缓存）自动更新？
自己项目中解决方法：
暂时是这样解决。
㈩ vue 不是路由跳转的页面怎么缓存
vue缓存主要四种方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中