Vue动态组件及其缓存

Vue可以使用 :is 来绑定动态组件。

动态组件

实例：

<!-- 下面的组件绑定了一个activeComponent变量，activeComponent是一个组件名，改变activeComponent的值可以达到切换组件的作用 -->
<component :is="activeComponent"></component>

上面component组件的每一次切换会导致其被一次次创建和销毁，在一些不需要重新渲染的场景比如tab的切换就无端增加了开销。

下面是缓存动态组件的方法。

缓存动态组件

只需要用 <keep-alive></keep-alive> 将动态组件包裹起来即可缓存失活的组件，这样失活的组件就不会被销毁和再创建，减少了开销。

代码：

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