应用场景
有时候我们不希望组件被重新渲染影响使用体验；
或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。
这时候就可以用到keep-alive组件
<keep-alive>
<component> </component>
</keep-alive>
区别
不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据
使用 keep-alive 后 每次切换组件 只会在第一次触发组件 created 生命周期函数 并且 离开该组件时不会销毁该组件
keep-alive 的生命周期
1.初次进入时：created > mounted > activated；退出后触发 deactivated
2.再次进入：会触发 activated；
keep-alive 的参数
1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3.max - 数字。最多可以缓存多少组件实例。
<keep-alive include ="组件的name">
</keep-alive>
也可以通过路由表中的mate属性 配置哪些需要缓存
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
]
})
<keep-alive >
<router-view v-if="this.$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"> </router-view>
注意如果是动态路由使用 keep-alive 需要给 router-view 设置key值
动态路由大多是使用一个组件 只是数据不同 所以key值 直接设置自己的路由信息即可
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
