Vue 的异步组件

目录

1,异步组件介绍

在项目中,有的组件仅在需要时才会加载,这时就需要用到异步组件。

异步组件本质上是一个函数 ,该函数调用后返回一个PromisePromise 成功的结果是一个组件对象 。一般使用 import() 动态导入组件作为这个 Promise

js 复制代码
// 函数需要返回一个 Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

2,路由中使用

常见的应用------路由懒加载

js 复制代码
{
  name: "Home",
  path: "/",
  // webpackChunkName 用于分包
  component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),
  meta: { title: "首页" },
}

Vue Router 只会在第一次进入这个页面时调用这个函数,然后使用缓存数据。也就是说,已经加载过的组件不会重新加载。

3,组件中使用

异步组件也可以在组件中使用,比如某些场景下需要获取数据后才能加载某组件。

3.1,Vue2 语法

Vue2官网参考

html 复制代码
<script>
// 返回Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

// 返回Promise
const AsyncComponent2 = () => import("./MyComp.vue")

export default {
  components: {
    // Vue会调用该函数,并等待 Promise完成,完成之前该组件位置什么也不渲染
    AsyncComponent,
  },
};
</script>

函数也可以返回有一个配置对象,并处理加载状态。

js 复制代码
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了,
  // 则使用加载失败时使用的组件。默认值是:`Infinity`
  timeout: 3000
})

3.2,Vue3 语法

Vue3官网参考

需要使用 defineAsyncComponent 方法来实现,函数同样需要返回一个 Promise

html 复制代码
<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  })
})

const AsyncComp2 = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)
</script>

也可以全局注册

js 复制代码
app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

也能处理加载状态

js 复制代码
const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./MyComponent.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间,默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制,并超时了
  // 也会显示这里配置的报错组件,默认值是:Infinity
  timeout: 3000
})

以上。

相关推荐
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue