Vue.js 学习笔记十三：Vue Router 之 keep-alive

目录

keep-alive

---

keep-alive

有时候我们不希望组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到 keep-alive 组件。

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

如果未使用 keep-alive 组件，则在页面回退时仍然会重新渲染页面，触发 created 钩子，使用体验不好。 在一些场景中使用 keep-alive 组件会显著提高用户体验，菜单存在多级关系，多见于列表页、详情页的场景如：

• 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息。

• 订单列表跳转到订单详情，返回，等等场景。

keep-alive 的生命周期

• 初次进入时：created > mounted > activated；退出后触发 deactivated 钩子函数。

• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

在 home.vue 中可以验证：

<script>
	export default {
		name: 'home',
		created() {
			console.log('home created');
		},
        mounted() {
			console.log('home created');
		},
		destroyed() {
			console.log('home destroyed');
		},
		activated() {
			console.log('home activated');
		},
		deactivated() {
			console.log('home deactivated');
		}
	}
</script>

未使用 keep-alive 组件，切换路由可以看出打印结果：

home created
home mounted
home destroyed
home created
home mounted

下面更改 App.vue 使用 keep-alive 组件：

         <keep-alive>
             <router-view />
         </keep-alive>

现在切换路由可以看出打印结果：

 home created
 home mounted
 home activated
 home deactivated
 home activated

在 about.vue 中同样添加这些钩子函数，发现也是同样的效果。但是这时我想 about 组件每次进来都要重新创建。那么怎么做呢？

keep-alive 组件提供了以下几个重要的属性：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

• max - 数字。最多可以缓存多少组件实例。

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

         <!-- 多个用逗号分隔字符串 --> 
         <keep-alive include="home,about">
             <router-view />
         </keep-alive>
         <!-- 正则表达式 (使用 `v-bind`) -->
         <keep-alive :include="/home|about/">
             <router-view />
         </keep-alive>
         <!-- 数组 (使用 `v-bind`) -->
         <keep-alive :include="['home', 'about']">
             <router-view />
         </keep-alive>

max 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

         <keep-alive :max="5">
             <router-view />
         </keep-alive>