㈠ 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页面，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
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。
参考 https://juejin.cn/post/6844903918313406472
参考 https://www.imooc.com/article/302879
㈣ vue3使用 keep-alive对iframe进行缓存
使用keep-alive缓存不了iframe界面原因
【1】原理：Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。因此，Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。
【2】参数：Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
【3】Keep-alive 组件提供了两个生命钩子函数，分别是 activated 和 deactivated 。
activated ：当页面存在缓存的时候执行该函数。
deactivated ：在页面结束时触发该方法，可清除掉滚动方法等缓存。
iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。
不使用 keep-alive ，因为vnode原理不适用。直接把打开过得iframe中的dom保存下来。通过v-show显示隐藏
iframeComponentsArray这个数组是打开过的iframe页面数组
㈤ 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的理解是什么
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使用keep-alive实现页面前进刷新,后退缓存
vue中,我们有时候需要实现这种场景:
1.搜索页面到列表页面，需要刷新重新获取数据。
2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：
第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive
第二步:在App文件中如下设置
第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:
第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:
这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。
㈧ vue页面缓存，keep-alive第一次无效的解决方法
方法二：使用 include + beforeRouteLeave + vuex 与方法一相似，不同的地方在于，将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存；跟方法一相比，不需要每次再重新初始化数据，但是需要在vuex中保存数据；
1、在创建router实例的时候加上scrollBehavior方法
2、将需要缓存的组件加在include属性里
3、在store里加入需要缓存的的组件的变量名，和相应的方法；
4、在beforeRouteLeave钩子函数里控制需要缓存的组件
㈨ vue列表缓存keep-alive
列表查询出约课记录之后，跳转到详情后再返回页面内容刷新，之前搜索的结果就没有了，为了解决这一问题，使用了keep-alive组件来实现页面缓存。
keep-alive
keep-alive.js源码：
只执行一次的钩子：当vnode.componentInstance和keepAlive为true时，不再进入$mount过程，也就不会执行mounted以及之前的钩子函数（beforeCreated、created、mounted）
可重复执行的activated：在patch阶段，最后会执行invokeInsertHook函数，这个函数调用组件实例的insert钩子，insert钩子中调用了activateChildComponent函数，递归执行子组件中的activated钩子函数
pageList → pageDetail → pageList，pageList保存原有状态；pageList → 其他 → pageList，pageList初始化状态
pageList → pageDetail → pageList，pageList保存原有状态；pageList → 其他 → pageList，pageList初始化状态
问题：方法二中，pageList → pageDetail → 其他 → pageList，pageList采用了缓存的数据， 解决：其他页面中的beforeRouteLeave增加 this.$store.dispatch('setCacheList', '')
㈩ 利用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 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。