KEEP-ALIVE

1.概念

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

2.应用

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

3.生命周期函数

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
1. activated

在 keep-alive 组件激活时调用

2. deactivated

在 keep-alive 组件离开时调用

当keep-alive去包裹路由的时候

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

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

同时在router中设置meta：

 

1. meta: {

2. keepAlive: false // 不需要缓村

3. meta: {

4. keepAlive: true // 需要被缓存