Vue keep-alive组件缓存 基础用法

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>

应用场景

• 搜索框保存搜索信息
• 导航栏
• 商品列表到商品详情的切换，当从商品详情切换回商品列表的时候不会重新再次获取数据渲染