keep-alive + 动态组件 使用

keep-alive

keep-alive是 Vue的内置组件 它自身不会渲染成一个 DOM 元素

同样属于内置组件的有 transition component

keep-alive的作用

包裹组件时候 不会销毁他们 而是会缓存不活动的组件实例 保留离开组件的状态 
例: 当离开组件或者切换路由的时候 我们在当前页面滚动到一定位置  再次回到当前页面时  滚动位置保持不动 同理input等输入的值也是一样 不会清空  

keep-alive的属性

keep-alive被包裹的组件 是会被缓存的 但是有的我们不需要缓存他 就可以通过属性给他排除在外 或者需要缓存哪个
注: 组件内部的name值是我们 是否缓存的条件

export default {
  name: "Home",
}

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

keep-alive的生命周期

被缓存组件中触发 
activated :页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated :页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

keep-alive的使用

//结合 动态组件 缓存loading组件
//动态组件下文会讲到
<keep-alive>
	<component :is="loading"></component>
</keep-alive>

//使用正则表达式，需使用v-bind
<keep-alive :include="/a|b/">
    <component :is="view"></component>
</keep-alive>

//排除tab1组件 根据curId缓存别的组件 (curId:组件的名称)
 <keep-alive exclude="tab1">
	 <component :is="curId"></component>
 </keep-alive>
 
 //缓存tab1组件 curId (curId:组件的名称)组件是tab1就缓存如果是别的就不缓存
 <keep-alive include="tab1">
	 <component :is="curId"></component>
 </keep-alive>

//根据路由中的meta.keepAlive是否为true来判断是否缓存
 <keep-alive>
 	<router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 // false不缓存
 <router-view v-if="!$route.meta.keepAlive"></router-view>

动态组件

Vue 中提供有一个内置的组件叫做 component 。这个组件就是动态组件。它需要设置 is 属性。is 属性的值就是需要渲染的组件的名字

动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，根据对应的显示；

当我们每次切换的时候,组件的生命周期钩子函数也会相应触发,也就是说动态组件切换时也会有创建销毁的性能开销 所以结合keep-alive使用

keep-alive 动态组件 实现选项卡

<ul>
  <li @click="curId = 'tab1'">tab1</li>
  <li @click="curId = 'tab2'">tab2</li>
</ul>
<div>
  <keep-alive>
  	//点击时候改变curId 来显示对应的组件
    <component :is="curId"></component>
  </keep-alive>
</div>

<script>
//引入需要缓存的组件
import tab1 from "../../components/tab1.vue";
import tab2 from "../../components/tab2.vue";
export default {
  data() {
    return {
      curId: "tab1",
    };
  },
  //注册组件
  components: {
    tab1,
    tab2,
  },
};
</script>