地区门户网站 建设攻略,攀枝花住房和城乡建设厅网站,企业网站服务器多少钱,合肥快速建站模板Suspense#xff1a;用于协调对组件树中嵌套的异步依赖的处理。
defineAsyncComponent#xff1a;定义一个异步组件#xff0c;它在运行时是懒加载的。参数可以是一个异步加载函数#xff0c;或是对加载行为进行更具体定制的一个选项对象。
异步组件的好处#xff1a;使…Suspense用于协调对组件树中嵌套的异步依赖的处理。
defineAsyncComponent定义一个异步组件它在运行时是懒加载的。参数可以是一个异步加载函数或是对加载行为进行更具体定制的一个选项对象。
异步组件的好处使用 import() 函数式模式引入的组件打包的时候都会做一个代码拆解会打包成单独的文件而不会打包到主包中当使用的时候在进行加载这样可以减少首屏加载时间优化用户体验。
异步组件 HomeView.vue
script setup langts// 这里模拟异步方法await new Promise((resolve){setTimeout(() {resolve(接口返回成功)}, 1000);})
/scripttemplatediv我是异步组件/div
/template 页面默认显示 “加载中...” 当异步组件的异步方法返回成功页面显示异步组件的内容代码如下
script setup langtsimport { defineAsyncComponent } from vue;const HomeViewdefineAsyncComponent(()import(./views/HomeView.vue))
/scripttemplateSuspensetemplate #defaultHomeView/HomeView/templatetemplate #fallbackdiv加载中.../div/template/Suspense
/template
上述案例可用于实现大型项目的骨架屏效果提升用户体验。
