keep-alive详解@昕

一.介绍

keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件中。

二.具体使用

1.使用router.meta，预先定义好要缓存的组件

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

2.路由表的配置

{
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '首页',
        keepAlive: true //需要缓存
      }
    },
    {
      path: '/classity',
      name: 'classity',
      component: Classity,
      meta: {
        title: '分类',
        keepAlive: false //不需要缓存
      }
    }

3.keep-alive具有include和exclude两个属性，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，exclude优先级大于include。

// 只缓存 name 为 index 的组件
<keep-alive include="index">
  <router-view/>
</keep-alive>

// 不缓存 name 为 index 的组件
<keep-alive exclude="index">
  <router-view/>
</keep-alive>

// 只缓存 name 为 index 或 hello 的组件
<keep-alive include="index,hello">
  <router-view/>
</keep-alive>

// 只缓存以 in 开头的组件（使用正则表达式，需使用 v-bind）
<keep-alive :include="/^in.*/">
  <router-view/>
</keep-alive>

// 也可以动态绑定需要缓存的组件（tagsList：存储组件name值的数组，数组是js动态控制的）
<keep-alive :include="tagsList">
  <router-view/>
</keep-alive>

4.被包含在 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
1）activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。
2）deactivated：在组件被停用时调用

5.用beforeRouteLeave函数动态设置 meta.keepAlive

	export default {
		  name: 'hello',
		  //keep-alive钩子函数：组件被激活时调用
		  activated() {
		    console.log('首页被激活');
		  },
		  //keep-alive钩子函数：组件消失，被缓存时调用
		  deactivated() {
		    console.log('首页被缓存');
		  },
		  beforeRouteLeave(to, from, next) {
		    //设置下一个路由的meta（即首页）
		    to.meta.keepAlive = true;  // 让首页缓存，即不刷新
		    next();
		  }
	}