【Vue9】动态组件

比如说想做个 Toggle的切换效果，点击按钮来回切换显示1还是2。
接到这种需求，我们可能会这样做

定义了两个子组件
进行判断

除了用这种写法，还能通过用动态组件的形式来编写。

改成这样
component是Vue里自带的一个标签，它指的就是动态组件， 它有一个属性叫做is，让is去绑定一个数据，数据就是type，其他地方不变。（script部分不变，改写的只是DOM模板部分）最后展现的效果一致，也就是也能实现Toggle效果。
动态组件会根据is里面数据的变化，动态加载不同的组件。

提高展示效率的方法

我们每一次切换的时候，实际上Vue的低层会判断现在这个组件不用了，也就会将它销毁掉，然后去创建第二个组件，如果再切换到第一个组件，又将第二个组件销毁，重新创建第一个组件。也就是每一次切换，会销毁一个组件，创建另一个组件。
这样做其实很耗费性能，如果组件的内容每次都一样，可以将其缓存起来。这里有两种方法：

keep-alive

如果希望那些组件实例能在第一次被创建的时候缓存下来，可以用keep-alive将动态组件包裹起来。
像这样：

<keep-alive>
  <component :is="type"></component>
</keep-alive>

v-once

还有一种是v-once指令，在子组件模板内加一个v-once。

我是加了v-once
看到v-once，在将它拿出来的时候，就将它放到内存中，不再销毁。