动态组件
动态组件允许你根据不同的条件渲染不同的组件。你可以使用 <component> 元素，并通过 :is 特性动态绑定组件的名称或组件对象。
<template>
<div>
<component :is="currentComponent"></component>
<button @click="toggleComponent">切换组件</button>
</div>
</template>
<script>
const app = Vue.createApp({
data() {
return {
currentComponent: 'component-a'
};
},
methods: {
toggleComponent() {
this.currentComponent = (this.currentComponent === 'component-a') ? 'component-b' : 'component-a';
}
}
});
app.component('component-a', {
template: '<p>这是组件 A</p>'
});
app.component('component-b', {
template: '<p>这是组件 B</p>'
});
app.mount('#app');
</script>
在这个例子中，通过 :is="currentComponent" 动态绑定了组件的名称，然后通过按钮点击切换了当前渲染的组件。
异步组件
异步组件允许你在组件需要时再进行加载，这对于提高应用程序的性能和减小初始加载体积非常有帮助。你可以使用 defineAsyncComponent 函数来定义异步组件。
<template>
<div>
<async-component></async-component>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
const app = Vue.createApp({
components: {
AsyncComponent
}
});
app.mount('#app');
</script>
在这个例子中，使用 defineAsyncComponent 函数异步地加载了 AsyncComponent.vue 组件。当组件被渲染时，它会动态地加载并渲染这个组件。
异步组件可以通过 import 语句实现懒加载，这样只有在需要的时候才会下载相关的代码。这有助于提高应用程序的初始加载性能。
总体来说，动态组件和异步组件是 Vue 3.0 中用于处理组件动态加载和渲染的两个重要的特性。
转载请注明出处：http://www.zyzy.cn/article/detail/498/Vue 3.0