动态、缓存、异步组件

目录

动态组件

:is的两种传值方式

导入的组件对象

被注册的组件名

使用场景

优缺点

优点

缺点

缓存组件

简介

使用场景

优缺点

优点

缺点

异步组件

简介

使用场景

优缺点

优点

缺点

例子

---

动态组件

Vue 提供了一种动态组件的方式，即使用 <component :is="componentName"></component> 的形式进行动态组件渲染。其中 componentName 是一个动态绑定的组件名变量。

<component :is='n'></component> //当n发生了变化，组件就会随之发生变化

:is的两种传值方式

导入的组件对象

<component :is='n'></component>

export default {

        data() {

                return {

                        n: box1

                }

        },

        components: {

                box1,

        },

}

被注册的组件名

<component is='box1'></component>

export default {

        components: {

                box1,

        },

}

使用场景

使用动态组件，可以在不同的场景下渲染不同的组件，以达到动态化的UI效果。例如根据用户的权限级别，显示不同的操作按钮、输入框、表单等。

动态组件的场景之一是在大型应用中组件数量庞大时，使用动态组件能够很好地减少麻烦的组件注册和使用。

优缺点

优点

动态组件的优点是可以根据运行时计算渲染的组件，提高灵活性；并且避免了在不需要时注册大量的组件，减少一些代码冗余。

缺点

动态组件的缺点在于，由于是在运行时根据绑定的变量计算的，因此不利于静态分析，可能会给代码调试带来一些困难。并且依赖运行时的计算，可能会对性能有一定影响。