‘壹’ vue使用keep-alive缓存页面，返回页面时刷新部分数据
生命周期执行顺序：
1、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情况：beforeRouteEnter -->局春凯 created --> mounted --> activated --> deactivated
3、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated
在keep-alive页面里的activated 监听路由的参数变化可以实现全页面刷新，
"$route.query.type": function name(paidrams) {
if (this.$route.path === "当前森碧的路径") {
console.log("上次id", this.policyId, "本次id", this.$route.query.id);
if (this.policyId != this.$route.query.id||this.pageType!= this.$route.query.type) {
console.log("路由参变化");
this.getDetail();
}
桐唤}
},
$route: {
handler: function (val, oldVal) {
if (val.path === "当前的路径") {
console.log("监听路由变化", val, oldVal);
}
}
}
‘贰’ 利用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 中，这两个钩子函数依枝者然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
‘叁’ 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 不被握铅调用
‘肆’ 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 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了！！！