Vue 的异步组件

这篇具有很好参考价值的文章主要介绍了Vue 的异步组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,异步组件介绍

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

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

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

2,组件中使用

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

2.1,Vue2 语法

Vue2官网参考

<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>

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

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

2.2,Vue3 语法

Vue3官网参考

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

<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>

也可以全局注册

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

也能处理加载状态

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

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

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

3,路由中使用

路由懒加载

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

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

3.1,vue3语法

封装实现异步页面。

// utils/index.js
import { defineAsyncComponent } from "vue";
import Loading from "../components/Loading.vue";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({
  trickleSpeed: 50,
  showSpinner: false,
});

function getAsyncPage(path) {
  return defineAsyncComponent({
    loader: async () => {
      NProgress.start();
      await delay();
      const comp = await import(path);
      NProgress.done();
      return comp;
    },
    loadingComponent: Loading, // 当promise在pending状态时,将显示这里的组件
  });
}
import { getAsyncPage } from "../util";

const Home = getAsyncPage("../views/Home.vue");
const About = getAsyncPage("../views/About.vue");

export default [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

以上。文章来源地址https://www.toymoban.com/news/detail-740359.html

到了这里,关于Vue 的异步组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中实现异步组件

    使用场景一:当组件进入视窗时再进行加载 假设页面中有三个组件A、B、C C组件中有一张图片 打开页面:   如果一个页面中的内容非常多,用户再首次打开时并没有浏览到下方的内容,但页面必须加载完下方的内容才会显示,这无疑非常影响性能 接下来我们做一些调整 创建

    2024年02月06日
    浏览(32)
  • vue3到vue2组件重构方法笔记

    这两天的任务是把一批做好的vue3组件放在vue2项目中使用,将组合式api分散开有一些零散的技巧,所以写一篇转化笔记以供大家参考 先上vue3一个组件的示例代码 上面是其中一个vue3组件样式表,在vue3的项目中展示效果为下图所示: 组件中还有一些其他的功能都要完整保留,

    2024年02月07日
    浏览(46)
  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(76)
  • 一文搞懂 vue2 与 vue3 函数式组件

    目录 vue2函数式组件 h函数 h函数有那些参数配置 在h函数中如何使用条件判断及循环语句  事件  函数式组件  slots() 和 children 对比 简单的例子 业务场景下的函数式组件 vue3函数式组件 h函数 基本使用 v-on  组件 渲染插槽  resolveComponent() 函数式组件 案例一 案例二 总结 概览

    2024年02月07日
    浏览(44)
  • vue2和vue3 子组件父组件之间的传值方法

    在组件化开发的过程中难免会遇见 子组件和父组件之间的通讯那么这里讲关于vue2和vue3不同的通讯方式 先看一下vue2 父组件向子组件传递参数 父组件通过 : 语法 其实就是v-bind 来传递参数 子组件通过 props 来获取父组件传递的方法 亿点小知识:子组件接收到数据之后,不能直接

    2024年02月09日
    浏览(47)
  • 【前端面经】Vue3和Vue2的区别

    Vue是一种非常流行的JavaScript框架,因其易用性和灵活性在开发人员中备受欢迎。Vue2是Vue框架的上一个重要版本,于2016年发布。但是,Vue3是最新版本的Vue框架,于2020年正式发布并带来了一些重大变化。本文将探讨Vue3和Vue2之间的主要区别。 Vue3的一个显着优势是其更小的代码

    2024年02月02日
    浏览(83)
  • Vue.js 中的异步组件是什么?如何使用异步组件?

    在 Vue.js 中,异步组件是一种延迟加载组件的方式,可以大大提高应用程序的性能和加载速度。本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件。 在传统的 Vue.js 开发中,组件是在应用程序启动时就立即加载的。这种方式虽然简单,但是会导致应用程序的初始

    2024年02月12日
    浏览(38)
  • vue2升级为vue3 vuedraggable 拖动组件报错

    升级组件 npm i -S vuedraggable@next 使用示例 2、Item slot must have only one child 官方GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js  官方demo https://sortablejs.github.io/vue.draggable.next/#/two-lists

    2024年02月16日
    浏览(42)
  • VUE3+vite项目中动态引入组件和异步组件

    1. 把项目中所有vue文件注册成异步组件。 2. 获取组件 在setup函数获取组件 3. 参考如下 Glob 导入 Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块: 以上将会被转译为下面的样子: 你可以遍历 modules 对象的 key 值来访问相应的模块: 匹配到的文件默认是懒加载的

    2024年02月10日
    浏览(105)
  • 从Vue2到Vue3, 一键升级前端开发技能

    本文的目的,是为了让已经有 Vue2 开发经验的   人   ,快速掌握 Vue3 的写法。 因此,   本篇假定你已经掌握 Vue 的核心内容   ,只为你介绍编写 Vue3 代码,需要了解的内容。 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API 。因此 Vue3 的  script  现在支

    2024年02月08日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包