Vue3 异步组件 suspense

vue在解析我们的组件时，是通过打包成一个 js 文件，当我们的一个组件引入过多子组件是，页面的首屏加载时间由最后一个组件决定优化的一种方式就是采用异步组件，先给慢的组件一个提示语或者骨架屏，内容回来在显示内容

结合elementui 使用

代码

<template><div class="layout"><h1>suspense</h1><Suspense><template #default><sus></sus></template><template #fallback><copyVue/></template></Suspense></div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from "vue";
import copyVue from "./sus/copy.vue";
let sus = defineAsyncComponent(() => import("./sus/index.vue"));
</script>
<style scoped lang="scss">$bg:#ccc;.layout{width: 800px;height: 400px;background-color: $bg;margin: auto;}
</style>

引入 defineAsyncComponent 定义异步组件，这个api 接收一个一个函数，函数返回值为需要后来显示的组件， copyVue 为预先显示的组件或者自定义内容

 <Suspense><template #default><sus></sus></template><template #fallback><copyVue/></template></Suspense>

使用 suspense 内置组件在该组件内使用命名插槽官方定义的

#default 放后来显示的组件

#fallback 放置预先显示的内容

要想组件变成异步组件可以使用顶层 await 技术即不用再 async 函数内使用那个该组件就变成异步组件

代码

<template><div class="sus"><img class="img" :src="res.url" alt=""><h1 class="posi">{{res.name }}</h1><h1 class="posi">{{ res.des }}</h1></div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import './com.scss'
let fn = ()=>{return new Promise(  (resolve,reject)=>{setTimeout(async() => {resolve(axios.get('/data.json'))}, 2000);})}let {data:{data:res}}:any =  await   fn()console.log(res);
</script>
<style scoped lang='scss'>.sus{width: 100%;height: 200px;background-color: #999;
}</style>

copyvue

<template><div  v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(122, 122, 122, 0.8)" class="sus"></div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
const loading = ref(true)
</script>
<style scoped lang='scss'>
.sus{width: 100%;height: 200px;
}</style>

scss

.posi{height: 50px;background-color: rgb(209, 136, 136);margin-top: 20px;}.img{width: 30px;height: 30px;background-color: rgb(113, 52, 52);}

public 下的 data.json

{"data":{"name":"你好世界","url":"./favicon.ico","des":"世界是个荒原"}
}

public 下的内容回当成服务的 '/xxx' 请求路径 get可以请求到文件内容

http://localhost:5173/data.json

Vue3 异步组件 suspense相关推荐

异步组件Suspense
异步组件由于vue是单页面应用,但很多时候加载大量的代码会因为请求还没有完成导致页面出现空白的情况,这时候我们想在数据请求加载之前显示一些其他提示内容而不是空白.等页面加载完成之后在渲染数据. 此时 ...
vue3异步组件怎么获取ref，获取组件实例？曲线救国的方式。
翻看文档实在没找到异步组件加载成功后的回调,获取ref写个setTimeout延迟个一两秒可以,万一网速慢就GG,所以还是得明确的知道这个组件什么时候下载引入成功的. 目前的思路是把defineAsy ...
vue3 + vite + ts + setup , 第四练异步组件的使用，defineAsyncComponent和Suspense的使用
在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件.这样做的目的可以提高页面加载速度,优化用户体验,减少首屏白屏时间 defineAsyncComponent 方法接收一 ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
suspense组件和异步组件
等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤: 异步引入组件,使用defineAsyncComponent定义异步组件 import {defineAsyncComponent} ...
Vue3动态组件/异步组件
文章目录一.动态组件 1.markRaw 2.keep-alive 二.异步组件 1.使用官方提供的defineAsyncComponent()函数 2.使用插件vueuse 一.动态组件动态切换 ...
vue前端路由和异步组件
路由前端路由的目的: 在不用请求后端的情况下跳转页面 hash路由 1.通过改变hash值去改变路由 2.通过loacation.hash得到hash值 '#/curriculum' 3.监听事件: ...
react-activation缓存React.lazy异步组件问题记录
1.背景当前框架使用的路由规则是使用React.lazy动态绘制的,使用KeepAlive组件缓存时一直不能缓存 export const RouteWithChildrenSubRoutes = ...
Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...

Vue3 异步组件 suspense

要想组件变成异步组件可以使用顶层 await 技术即不用再 async 函数内使用那个该组件就变成异步组件

代码

copyvue

scss

public 下的 data.json

Vue3 异步组件 suspense相关推荐

最新文章

热门文章

Vue3 异步组件 suspense

要想组件变成异步 组件 可以使用 顶层 await 技术 即 不用再 async 函数内使用 那个该组件就变成 异步组件

代码

copyvue

scss

public 下的 data.json

Vue3 异步组件 suspense相关推荐

最新文章

热门文章

要想组件变成异步组件可以使用顶层 await 技术即不用再 async 函数内使用那个该组件就变成异步组件