keep-aliive组件
- <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
- 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
作用实现组件缓存
使用方法
// 将需要缓存的路由组件包裹起来
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</transition>
- 1.使用keep-aliive组件会让生命周期失活
解决方法
调用 activated 和 **deactivated**两个钩子函数,它们可以在被 keep-alive 缓存的组件激活时调用,在这两个组件里可以执行和created
一样的方法。 - 2.控制那些组件缓存
1.路由控制:在路由index.js
文件里给想要组件缓存的组件定义keepAlive:tuer
状态,如下图所示。
在组件里用v-if
绑定刚才定义在路由里的状态
<keep-alive>
<router-view v-if="$router.meta.keepAlive"></router-viiew> // 需要组件缓存
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-viiew> // 不需要组件缓存
2.name
名控制:使用 keep-alive
自带的属性 include
,只有名称匹配的组件会被缓存,参数可以为字符串或正则表达式。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"> // 引号里是需要被缓存的组件name名,用逗号隔开,可以包含多个
<router-view></router-view>
</keep-alive>
需要缓存的组件定义name
名
<script>
export default
name:'a'
</script>
应用场景
- 搜索框保存搜索信息
- 导航栏
- 商品列表到商品详情的切换,当从商品详情切换回商品列表的时候不会重新再次获取数据渲染