一、介绍

先来看一个问题？

从首页的区块链模块切换到文章详情页面，再从文章详情页面回到首页，我们发现首页重新渲染原来的状态没有了，又回到了推荐模块。

首先，这是正常的状态，并非问题，路由在切换的时候会销毁切出去的页面组件，然后渲染匹配到的页面组件。

但是我想要某些页面保持状态，而不会随着路由切换导致重新渲染。

二、解决方案

使用 keep-alive 缓存组件

官方文档：在动态组件上使用 keep-alive

主要用于保留组件状态或避免重新渲染，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

（1）组件缓存不是持久化，它只是在应用运行期间不会重新渲染，如果页面刷新还是会回到初始状态。

（2） 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

（3） 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

（4）组件生命周期钩子和缓存

（5）include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

三、项目中的缓存配置

参考链接：

https://juejin.im/post/5d22f0f3f265da1b94216d0b

问题描述：

我们希望

1. 登录成功后，就把缓存给清除掉，让组件重新进行渲染。

2. 等页面渲染完成后，再给页面加上缓存（keep-alive）

实现思路：给keep-alive 的include属性绑定一个动态的数组，因为keep-alive只会缓存include数组中的组件

首页在Vuex容器中定义这个动态数组cachePages：

然后，在用户登录成功之后，清除layout组件的缓存：


这样就解决了上面提到的，用户1登录后退出登录，使用用户2的账号登录时，”我的“页面的个人信息展示的还是用户1的个人信息的问题。

但是此时，layout组件没有缓存，当登录的用户从区块链频道点击 某篇文章 -> 进入文章详情页面后，再返回到首页时，首页会重新进行渲染，无法回到之前用户所在的区块链频道，而是直接变成首页渲染成功后默认显示的推荐频道。

为了解决这个问题：我们可以在layout组件的渲染完成之后，给它加上缓存。

解决缓存带来的列表滚动位置问题：

就是列表滚动的位置没有缓存下来，也就是用户在首页的 区块链模块的文章列表滚动了一段距离后，进去文章详情页面，再返回到首页时，页面确实还在区块链模块，但是列表滚动的位置又回到了列表顶部。

layout切换到文章详情页面，触发activated生命钩子:

文章详情页面切换到layout，触发deactivated生命钩子:

使用Vue自定义组件时需要注意在那个生命周期中初始化组件
有这样一个业务需求:

1. 页面中包含两个div, 两个div通过选择radio切换显示
2. div的显示通过v-if控制
3. 每个div中都包含一个自定义select组件
4. 两个select组件中的list不一样

页面完成够发现两个div中的select组件都可正常下拉\选择值, 但是当在div a中的select选择了值后, 比如选择value a, 再通过radio切换到div b, 发现div b中的select上显示div a中选择的值value a, 而value a不存在与div b中的select的data list中.
初步估计是select组件中显示的label从上一个vue实例中缓存了下来, 在mounted钩子中没能过滤掉这个这个值.
打印出来看看:

发现在mounted状态中组件中显示的label, 即截图中的selectShow为空, 因此不能被过滤掉. updated状态selectShow的值就出现了, 这时获得了selectShow值的引用我们就可以过滤掉上一个vue实例的selectShow的值了.
但是, updated状态我们的组件已经更新完成, 就是说组件已经完成显示了, 已经显示在我们的屏幕上了, 这时再去过滤值就会引起属性的更新, vue就会再走一遍生命周期的流程, 这是一个死循环, 在更新完成状态updated中开始新更新, 会导致浏览器卡死.

那么, 我们应该在哪里进行数据过滤呢?
除了updated状态外, 还有一个生命周期能获得selectShow的引用, 并且不会导致死循环.

这就是beforeUpdate, 在beforeUpdate中我们可以放心的进行数据过滤, 例如直接将selectShow置空.
出现这种问题的原因编写组件时对vue的生命周期不够了解, 通常只在mounted中进行前置操作, 没有考虑到属性在vue实例的不同生命周期的不同状态.

首先我们要知道为什么需要组件缓存?

在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合

理的方式组织起来，那么自然会存在组件之前切换的问题，Vue 中有个动态组件

的概念，它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的

变化，去要切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的，

而我们需要保留组件的状态，为了解决这个问题，需要使用到 Vue 中内置组件  <keep-alive>

<keep-alive>的作用

包裹动态组件时，会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。

(应用场景)

比如有一个列表和一个详情，那么用户就会经常执行打开详情=>

返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可

以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列

表的时候，都能从缓存中快速渲染，而不是重新渲染。