keep-alive的理解

1、keep-alive是Vue.js的一个内置组件。vuevue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。

2、它有两个生命周期：
activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用
它提供了include与exclude两个属性，允许组件有条件地进行缓存

3、示例：
<!-- keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些 -->
  <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

<template>
  <div id="app">
  	// 1. 将缓存 name 为 test 的组件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正则表达式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	
	
	// 5.动态判断
	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 将不缓存 name 为 test 的组件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4、原理：
首先，你要知道Vue.js内部将DOM节点抽象成了一个个的VNode(虚拟DOM)节点。所以，keep-alive的缓存也是基于VNode节点的而不是直接存储DOM结构。
其实就是将需要缓存的VNode节点保存在this.cache中，在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。