Vue 中的组件缓存

一、介绍

先来看一个问题？
在这里插入图片描述

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

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

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

二、解决方案

使用 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

问题描述：

在这里插入图片描述
我们希望

登录成功后，就把缓存给清除掉，让组件重新进行渲染。
等页面渲染完成后，再给页面加上缓存（keep-alive）

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

首页在Vuex容器中定义这个动态数组cachePages：
在这里插入图片描述
然后，在用户登录成功之后，清除layout组件的缓存：

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

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