vue动态组件
有时,我们需要在多个不同的组件之间进行切换操作。
组件的切换方式
- (1)使用v-if
使用v-if 来处理,适用频繁操作的场景。
会不断地创建组件和销毁组件,影响性能
;
不会保留组件改变后的状态及修改后的数据
<InBox v-if="currentCom==='InBox'"></InBox>
<PostMail v-if="currentCom==='PostMail'"></PostMail>
<RecycleBin v-if="currentCom==='RecycleBin'"></RecycleBin>
- (2)使用v-show ,
v-show 改变的只有该元素的display样式
根据表达式的值(布尔值),切换元素的显示与隐藏(display 属性)
显示与隐藏,dom树的结构未变
<InBox v-show="currentCom==='InBox'"></InBox>
<PostMail v-show="currentCom==='PostMail'"></PostMail>
<RecycleBin v-show="currentCom==='RecycleBin'"></RecycleBin>
- (3)动态组件
vue提供的更方便的方式去完成组件之间的切换----动态组件
既改变了dom树结构,又没有销毁元素
component组件
它是vue 内置的一个组件,它提供一个 is 属性用来动态渲染不同的组件
keep-alive 组件
当在这些组件之间切换的时候,如果要保持这些组件的状态,以避免反复重渲染导致的性能问题
,vue内置组件keep-alive帮我们解决了这个问题。使用 keep-alive 以后,内部包含的组件将增加 激活
和 失活/冻结
的状态 (类似于演员在舞台表演,叫谁的名字谁上来表演,没叫到的就在后台等待,第一个演员表演完,后面的上来接着演,而表演过的演员没有走,还在舞台后面,后续如果叫到他们,他们再上台)
<keep-alive>
<component :is="currentCom"></component>
<!--<component :is="isVisible"></component>-->
</keep-alive>
生命周期
使用了 keep-alive的组件会触发两个生命周期函数:
activated()
:keep-alive组件激活时调用(组件激活后需要它做什么)
deactivated()
:keep-alive组件停用时调用(同理,组件停用后需要它做什么)
看一个示例如下:
App.vue
<template>
<div id="app">
<