Vue3_05(动态组件)

动态组件 & 异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

切换组件案例

点击一个tab-bar，切换不同的组件显示

　　方式一：通过v-if来判断，显示不同的组件；
　　方式二：动态组件的方式

# 1
<template v-if="currentTab === 'home'">
    <home></home>
</template>
<template v-else-if="currentTab === 'about'">
    <about></about>
</template>
<template v-else>
    <category></category>
</template>

#2
<component :is="currentTab"></component>

注意：切换组件后，原组件会被销毁掉，再次回来时会重新创建组件。在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：

keep-alive

<keep-alive include="home,about">
      <component :is="currentTab"></component>
</keep-alive>

keep-alive属性     内置组件 | Vue.js https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive

　　include - string | RegExp | Array。只有名称匹配的组件会被缓存；
　　exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
　　max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

 

缓存组件的生命周期　

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的：
　　但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
　　这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听

activated() {
      console.log(activated)
    },
    deactivated() {
      console.log(deactivated)
    },