vue-动态组件（component），缓存组件（keep-alive）、异步组件（defineAsyncComponent ）

小知识点：若想使用v-for和v-if两个条件，但又不想使用多余出来的标签，则可以在组件外面添加template标签来实现

一、动态组件（component）

        含义：有的时候，我们希望页面中的某个地方，在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件来实现

        用法：它允许您根据条件动态选择要渲染的组件。通过使用动态组件，您可以基于不同的状态条件来切换不同的组件，从而实现更灵活的组件复用和组合。

is 属性的值必须是以字符串形式指定的已注册组件的名称。

而 :is 则会将表达式的值作为字符串解析，从而动态地渲染相应的组件。

例：

        效果图：当is为属性时：                当is为变量时：

二、缓存组件（keep-alive）

        含义：与动态组件（component）一起使用，keep-alive嵌套着component。当包裹的组件（component）被切换隐藏时，并不会将组件销毁，而是将其缓存起来，下次再次使用时会从缓存中取出复用的过程,  

        也就是：在不加keep-alive标签时，每次切换的时候该组件都会执行生命周期函数的六个步骤，切换回来也会执行创建前后、挂载前后，父组件会执行更新前后的函数。上一个组件会执行销毁前后的函数

                       添加了keep-alive标签后，切换时便将该组件存储起来，只执行了（创建前后、挂载前后），没有执行销毁函数，当再次切回时，不执行创建前后、挂载前后的生命周期函数了，而是只执行了父组件的更新前后函数执行了

例：点击按钮，就切换到哪个组件，再切换回来则直接取出来使用即可

    1.选择性缓存组件（keep-alive添加include属性，传入的是加载过的组件） 

         例：如需要将box1组件进行缓存，则在box1组件内部添加name属性：

                 在keep-alive标签中添加include属性，属性值为name属性的值，即可将box1的组件缓存起来，下次再切换box1，就不执行创建前后和挂载前后的生命周期函数了，父组件就执行更新前后这两个生命周期函数了

        （1：存储一个组件

选择性存储多个组件和选择性不存储组件（exclude）

三、异步组件（definedAsnyComponent）

        1.懒加载组件

        含义：允许将应用程序的不同部分（如模块、组件或函数）按需加载，需要就加载，不需要就不加载，而不是在初始化时一次性加载所有内容。这种按需加载的方式可以提高应用程序的性能和用户体验。

        步骤：1.需要从vue中引入defineAsyncComponent函数，这里使用了import来实现了按需加载

                        

                  2.引入组件的另一种写法：在注册组件后面直接使用defineAsyncComponent函数进行引入即可，在前面就不用引入了

        

2.预渲染组件

        含义：在构建过程中提前将组件的代码编译和渲染成为静态的html

        例：引入box4，做下面代码中的操作

                ​​​​​​​