VUE----keep-alive

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

1.准备测试组件：

创建一个组件，并在组件中监听如下事件：

created(){
    console.log('created事件被触发')
},
activated(){
    console.log('activated事件被触发')
},
deactivated(){
    console.log('deactivated事件被触发')
}

2.当不使用keep-alive组件时：

我们会发现切换组件时会触发created事件，activated和deactivated并不会被触发 created事件被触发

3.使用keep-alive组件时：

我们会发现created事件不会触发、activated和deactivated会被触发 activated和deactivated会被触发

4.keep-alive生命周期：

1.初次进入时：created > mounted > activated；退出后触发 deactivated
2.再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

5.keep-alive属性：

1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3.max - 数字。最多可以缓存多少组件实例。