动态组件 & 异步组件 | 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) },