手牵手一块儿学习keep-alive

在咱们的平时开发工做中，有些组件不须要屡次渲染，须要将组件在内存中进行“持久化”。<keep-alive> 是一个抽象组件，在包裹组件时会缓存组件实例，而不是销毁它们。它是个抽象组件，自身不会渲染一个DOM元素，也不会出如今父组件链中。

举个例子？不存在的。。我是不会举例子的

使用方法

activated 和 deactivated

组件一旦被 <keep-alive> 缓存，再次渲染的时候就不会执行 created 、 mounted 等钩子函数，因此不会有通常的组件生命周期函数，可是不少业务场景都是但愿被缓存的组件再次被渲染的时候作一些事情，activated 和 deactivated 钩子函数就能够派上用场，它的执行时机是 <keep-alive> 包裹的组件渲染的时候。 组件在 <keep-alive> 内被切换，它的 activated和deactivated这两个生命周期钩子函数将会被对应执行。
一、activated：页面组件被激活的时候调用，第一次渲染（首次进入组件）的时候会被调用：created -> mounted -> activated。以后每次<keep-alive> 激活activated被调用，因此能够在每次进入页面的时候获取最新的数据。
二、deactivated：页面组件被停用时调用。

配合<router-view>使用

<keep-alive>除了能够包裹普通组件外，它还能够配合 <router-view> 使用，将整个路由页面一块儿缓存下来，实际使用场景比较多。
举个例子：首页list，默认在list页面。B跳转到list，list不刷新；C跳转到list，list刷新。
在2.1.0以前，在路由选项中，配置meta属性，keepAlive为true即为须要缓存的组件，大多数写法是这样的：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码

//router配置
new Router({
    routes: [
        {
            name: 'list',
            path: '/list',
            component: list,
            meta: {
                keepAlive: true // // 须要被缓存
            }
        }
    ]
})
复制代码

用到组件内的路由守卫,在 B 组件里面设置 beforeRouteLeave：

export default {
	data() {
		return {};
	},
	methods: {},
	beforeRouteLeave(to, from, next) {
		 // 设置下一个路由的 meta
		to.meta.keepAlive = true;  // 让 list 缓存，即不刷新
		next();
	}
};
复制代码

用到组件内的路由守卫，在 C 组件里面设置 beforeRouteLeave：

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = false;  // 让 list 不缓存，即刷新
            next();
        }
};
复制代码

include 和 exclude

2.1.0新增了include和exclued属性，容许组件有条件地缓存，能够是字符串、正则表达式或数组。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>
复制代码

<!-- 一个include解决了，不须要多写一个标签，也不须要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>
复制代码

<keep-alive> 先匹配被包含组件的 name 字段，若是 name 不可用，则匹配当前组件 components 配置中的注册名称。

结束语

原本应该举详细的栗子来分析下场景，但都是公司项目，不便贴出。因此，我没骗你吧，我真没举例子。本身太懒，又不想写demo，我....懒。
本文提供一种解决思路，仅作参考。若有不当之处，烦请不吝指出。另外，如对本文内容有意见或建议，欢迎一块儿交流探讨。