《通信软件前端开发》课件-20.vue3动态组件与keep-alive搭配使用

《通信软件前端开发》vue3动态组件与keep-alive搭配使用案例导入，激发兴趣同学们在开发过程中是否遇到这样的需求：根据用户使用需要切换显示不同的组件？有什么好的办法可以解决这个问题呢？动态组件就可以很好完成这个工作。通常指的是在运行时根据某些条件或数据动态切换显示不同的组件。同时可以配合KeepAlive组件实现组件缓存。下面就让我们一起来了解一下吧。知识讲解动态组件是根据某些条件或数据动态切换显示不同的组件，<component:is="...">

是内置组件，用于根据绑定的

is

属性值动态渲染不同的组件，非常适合

Tab切换、内容类型切换

等场景。缓存组件状态切换时若不想丢失内部状态，可用<keep-alive>包裹：<keep-alive><component:is="currentTabComponent"></component></keep-alive>这样切换回来时会保留之前的数据和DOM状态。知识讲解利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件，语法格式如下。<component:is="要渲染的组件"></component>上述语法格式中，<component>标签必须配合is属性一起使用，is属性的属性值表示要渲染的组件，当该属性值发生变化时，页面中渲染的组件也会发生变化。is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef()函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。实操教学动态组件创建和使用下面，我们用一个简单的示例来看一下动态组件的使用：首先新建一个vue项目，在项目中创建src\components\MyLeft.vue文件。<template>MyLeft组件</template>在项目中创建src\components\MyRight.vue文件。<template>MyRight组件</template>实操教学再创建src\components\DynamicComponent.vue文件，在该文件中导入并使用MyLeft和MyRight组件，实现单击按钮时动态切换组件的效果。<template><button@click="showComponent=MyLeft">展示MyLeft组件</button><button@click="showComponent=MyRight">展示MyRight组件</button><div><component:is="showComponent"></component></div></template><scriptsetup>importMyLeftfrom'./MyLeft.vue'importMyRightfrom'./MyRight.vue'import{shallowRef}from'vue'constshowComponent=shallowRef(MyLeft)</script>上述示例代码中，通过两个不同的按钮切换component元素的:is属性值，完成页面的按需切换。实操教学利用KeepAlive组件实现组件缓存使用动态组件实现组件之间的按需切换时，隐藏的组件会被销毁，展示出来的组件会被重新创建。因此，当一个组件被销毁后又重新创建时，组件无法保持销毁前的状态。如果在多个组件之间进行动态切换时想要保持这些组件的状态，以及避免重复渲染导致的性能问题，可以通过组件缓存来实现。<KeepAlive>标签的语法格式如下。<KeepAlive>

被缓存的组件</KeepAlive>实操教学<template>MyLeft组件

<div>count值为：{{count}}<button@click="count++">+1</button></div></template><scriptsetup>import{ref,onMounted,onUnmounted}from'vue'constcount=ref(0)onMounted(()=>{console.log('MyLeft组件被挂载了')})onUnmounted(()=>{console.log('MyLeft组件被销毁了')})</script>修改前面创建的MyLeft组件代码如下实操教学点击动态组件切换效果如图所示可以看到在MyLeft组件和MyRight组件动态切换过程中，组件的运行数据没有保存。实操教学<div><KeepAlive>

<component:is="showComponent"></component></KeepAlive></div> <div><KeepAlive> <component:is="showComponent"></component></KeepAlive></div>为了能够实现组件缓存，把刚刚的动态组件添加到<KeepAlive>标签中实操教学从运行结果可以看出在动态组件从MyLeft组件切换到MyRight组件时，控制台中没有输出“MyLeft组件被销毁了”的信息，说明此时MyLeft组件已经被缓存了。再次单击“展示MyLeft组件”按钮，MyLeft组件状态数据依然存在。实操教学在默认情况下所有被<KeepAlive>标签包裹的组件都会被缓存。如果想要实现特定组件被缓存或者特定组件不被缓存的效果，可以通过KeepAlive组件的常用属性include、exclude属性来实现。在vue中，使用_____标签可以定义动态组件。填空题如果想要实现只有名称匹配的组件被缓存，可以通过KeepAlive组件的常用属性_____来实现。填空题请简述KeepAlive组件的作用。简答题课堂小测，检验成果<component>填空题答案include填空题答案在Vue中，可以通过KeepAlive组件实现组件缓存，KeepAlive组件通过<KeepAlive>标签来定义，使用<KeepAlive>标签包裹需要被缓存的组件时，组件就不会销毁。简答题答案课堂小测，检验成果课后思考+作业，巩固延伸课后思考思考动态组件和KeepAlive组合完成组件动态切换的优劣，查阅资料了解这种方式下，组件生命周期的影响。课后作业自己尝试写一个登录注册页面，利用动态组件完成登录和注册两个页面的