keep-alive 缓存组件状态

keep-alive 会缓存不活动的组件的状态 作用： 避免多次重复渲染降低性能 常用知识点： 1.include 字符串或正则表达式。只有匹配名称的组件会被缓存 2.exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存 3.max 数字 最多可以缓存多少组件实例 4.结合 Router 缓存部分页面
$router.meta.keepAlive 选项

缓存实现的方式 1.在 App.vue 给外面设置 标签 表示全部页面都缓存 2.include

<div id="app">
   <keep-alive>
   <!--item_a 组件会被缓存-->
       <router-view include="item_a" />
   </keep-alive>
</div>

2.exclude

<div id="app">
   <keep-alive>
   <!--只有 item_a 组件不会被缓存-->
       <router-view exclude="item_a" />
   </keep-alive>
</div>

3. 配合 Router

<!--第一步需要在 Router 里添加属性-->
<script>
//router.js
{
 path:'/item_a',
 name:'item_a',
 component:item_a,
 meta:{
    keepAlive:true   //需要被缓存
  }
}
</script>
<!--第二步 需要在App.vue 设置相关组件-->
<div id="app">
   <keep-alive>
      <!--keep-alive 为 true的时候显示-->
       <router-view v-if="$route.meta.keepAlive"/>
   </keep-alive>
   <!--keep-alive 为false的时候显示-->
   <router-view v-if="!$route.meta.keepAlive">
</div>