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 2 3 4 5 6 7 8 9 10 11 12 13

# 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

?

1 2 3

<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 这两个生命周期钩子函数来监听

?

1 2 3 4 5 6

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