<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.prod.js"></script>
<div id="app"></div>
<script>
const { createApp, defineAsyncComponent } = Vue;
const App = {
components: {
// 定义异步组件
AsyncComponent: defineAsyncComponent(() => {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟异步加载组件
resolve({
template: `<div><h2>异步加载的组件</h2><p>这是通过异步方式加载的组件！</p></div>`
});
}, 2000); // 模拟延迟加载2秒
});
})
},
template: `
<div>
<h1>Vue 3 异步组件加载示例</h1>
<p>等待 2 秒后加载异步组件...</p>
<!-- 使用异步组件 -->
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>加载中...</div>
</template>
</Suspense>
</div>
`
};
// 创建并挂载 Vue 应用
createApp(App).mount('#app');
</script>
Vue 3 异步组件
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}