Vue3 新特性 —— Suspense 异步组件

官方文档

异步组件 | Vue3中文文档
动态组件 & 异步组件 | Vue3中文文档

使用方法一:与插槽配合

1. 写一个异步组件

defineComponent 包裹要导出的实例对象能获取到更多提示。

1.1 setup 中返回一个 Promise 对象

/src/components/Async.vue





1.2 setup 中使用 async/await 代替返回 Promise(更推荐)

/src/components/Async.vue




2. 在 App.vue 中使用异步组件

注意:

  • 使用 包裹所有异步组件相关代码
  • 插槽包裹异步组件
  • 插槽包裹渲染异步组件之前的内容

/src/App.vue







3. 完成,效果如图所示

你可能感兴趣的:(Vue3 新特性 —— Suspense 异步组件)