keep-alive用法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。

在项目中有些时候组件或页面会在使用过程中重复的使用（比如：有一些列表页和设置页面），这些页面在重复的使用中会不停的创建和销毁，比如在单页面应用中通过<router-view></router-view>不断的加载。

在这个时候我们需要的就是vue2.0提供了一个 keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

1.基本用法

<keep-alive> <component> </component> </keep-alive>
或则
<keep-alive> <router-view></router-view> </keep-alive>

注：在缓存的组件里面第一只有第一次进入组件是才会触发created等生命周期钩子函数，再下次进来时只会触发activated 和 deactivated

2.动态选择缓存

在有的时候我们需要动态选择那些组件需要缓存那些不需要，vue.2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件
<keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive>

注：缓存给我们带来了好处能大大缩减页面重构时间，但是也带来了其他的麻烦 那就是 内存损耗，所以请在适当的时候使用keep-alive