Vue 的异步组件

目录

  • 1,异步组件介绍
  • 2,路由中使用
  • 3,组件中使用
    • 3.1,Vue2 语法
    • 3.2,Vue3 语法

1,异步组件介绍

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

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

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

2,路由中使用

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

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

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

3,组件中使用

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

3.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
})

3.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,// 展示加载组件前的延迟时间,默认为 200msdelay: 200,// 加载失败后展示的组件errorComponent: ErrorComponent,// 如果提供了一个 timeout 时间限制,并超时了// 也会显示这里配置的报错组件,默认值是:Infinitytimeout: 3000
})

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/126930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带你从0开始学习自动化框架Airtest

现在市面上做UI自动化的框架很多&#xff0c;包括我们常用的Web自动化框架Selenium&#xff0c;移动端自动化框架Appium。 虽然Selenium和Appium分属同源&#xff0c;而且API都有很多相同的地方&#xff0c;可以无损耗切换&#xff0c;但是还是需要引入不同的库&#xff0c;而…

Debug技巧-不启用前端访问后端

在日常开发中&#xff0c;我们经常会遇到各种问题需要调试&#xff0c;前后端都启动需要耗费一定的时间和内存&#xff0c;方便起见&#xff0c;可以直接用抓包数据访问后端&#xff0c;这里我们需要用到Postman或者ApiFox 抓包数据 在系统前台触发后端请求&#xff0c;在控制…

【MATLAB第81期】基于MATLAB的LSTM长短期记忆网络预测模型时间滞后解决思路(更新中)

【MATLAB第81期】基于MATLAB的LSTM长短期记忆网络预测模型时间滞后解决思路&#xff08;更新中&#xff09; 在LSTM预测过程中&#xff0c;极易出现时间滞后&#xff0c;类似于下图&#xff0c;与一个以上的样本点结果错位&#xff0c;产生滞后的效果。 在建模过程中&#xf…

ChatGPT更新多模态,支持图片和语音输入,会带来哪些新体验和影响?

不仅是光使用chat GPT更方便、更厉害&#xff0c;哪些和chat GPT结合技术的技术和产品能力也变得更强 像我们公司目前在用的RPA&#xff0c;就努力和这个chat GPT的技术结合&#xff0c;但是由于能力有限&#xff0c;使用的场景少之又少 但这次Chat GPT的更新&#xff0c;预计…

负载均衡深度解析:算法、策略与Nginx实践

引言 如今&#xff0c;网站和应用服务面临着巨大的访问流量&#xff0c;如何高效、稳定地处理这些流量成为了一个亟待解决的问题。负载均衡技术因此应运而生&#xff0c;它通过将流量合理分配到多个服务器上&#xff0c;不仅优化了资源的利用率&#xff0c;还大大提升了系统的…

服务器数据恢复—EMC存储pool上数据卷被误删的数据恢复案例

服务器数据恢复环境&#xff1a; EMC Unity某型号存储&#xff0c;连接了2台硬盘柜。2台硬盘柜上创建2组互相独立的POOL&#xff0c;2组POOL共有21块520字节硬盘。21块硬盘组建了2组RAID6&#xff0c;1号RAID6有11块硬盘. 2号RAID6有10块硬盘。 服务器故障&检测&#xff1…

[ACTF2023]复现

MDH 源题&#xff1a; from hashlib import sha256 from secret import flagr 128 c 96 p 308955606868885551120230861462612873078105583047156930179459717798715109629 Fp GF(p)def gen():a1 random_matrix(Fp, r, c)a2 random_matrix(Fp, r, c)A a1 * a2.Treturn…

Vue入门——核心知识点

简介 Vue是一套用于构建用户界面的渐进式JS框架。 构建用户界面&#xff1a;就是将后端返回来的数据以不同的形式(例如&#xff1a;列表、按钮等)显示在界面上。渐进式&#xff1a;就是可以按需加载各种库。简单的应用只需要一个核心库即可&#xff0c;复杂的应用可以按照需求…

AR的光学原理?

AR智能眼镜的光学成像系统 AR眼镜的光学成像系统由微型显示屏和光学镜片组成&#xff0c;可以将其理解为智能手机的屏幕。 增强现实&#xff0c;从本质上说&#xff0c;是将设备生成的影像与现实世界进行叠加融合。这种技术基本就是通过光学镜片组件对微型显示屏幕发出的光线…

[Machine Learning][Part 7]神经网络的基本组成结构

这里我们将探索神经元/单元和层的内部工作原理。特别是,与之前学习的回归/线性模型和逻辑模型进行比较。最后接介绍tensorflow以及如何利用tensorflow来实现这些模型。 神经网络和大脑的神经元工作原理类似&#xff0c;但是比大脑的工作原理要简单的多。大脑中神经元的工作原理…

python自动化测试(九):EcShop添加商品功能

前置条件&#xff1a; 本地部署&#xff1a;ECShop的版本是3.0.0、Google版本是 Google Chrome65.0.3325.162 (正式版本) &#xff08;32 位&#xff09; py的selenium版本是3.11.0 目录 一、前置代码 二、添加商品操作 2.1 点击添加商品 2.2 添加名称、分类、品牌 2…

Android sqlite分页上传离线订单后删除

1、判断订单表的的总数是否大于0&#xff0c;如果大于0开始上传订单 public int getOrderCount() {String query "SELECT COUNT(*) FROM " TABLE_NAME;Cursor cursor db.rawQuery(query, null);int count 0;if (cursor.moveToFirst()) {count cursor.getInt(0);…

flask 实践

flask框架研究&#xff1a; https://blog.csdn.net/shifengboy/article/details/114274271 https://blog.csdn.net/weixin_67531112/article/details/128256170 实现下载文件功能 vim test.py import io from flask import Flask, send_fileapp Flask(__name__) app.route(/…

QML 创建 Web 混合应用

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 随着互联网的快速发展,Web 应用在各个领域中变得越来越流行。为了满足用户对多样化功能的需求,我们经常需要将 Web 技术和原生应用相结合,来创建混合应用程序。 混合应用程序:是一种应用程序开发方法,它…

人工智能领域CCF推荐国际学术刊物最新目录(全)

2021年1月&#xff0c;CCF决定启动新一轮中国计算机学会推荐国际学术会议和期刊目录调整工作并委托CCF学术工作委员会组织实施。 2023年3月8日, 中国计算机学会正式发布了2022版《中国计算机学会推荐国际学术会议和期刊目录》(以下简称《目录》) 。 相较于上一版目录&#xff0…

LeetCode----1979. 找出数组的最大公约数

题目 给你一个整数数组 nums ,返回数组中最大数和最小数的 最大公约数 。 两个数的 最大公约数 是能够被两个数整除的最大正整数。 示例 1: 输入:nums = [2,5,6,9,10] 输出:2 解释: nums 中最小的数是 2 nums 中最大的数是 10 2 和 10 的最大公约数是 2 示例 2: 输入…

golang包的管理

Go语言中包的使用 Go语言使用包&#xff08;package&#xff09;这种语法元素来组织源码&#xff0c;所有语法可见性均定义在package这个级别&#xff0c;与Java 、python等语言相比&#xff0c;这算不上什么创新&#xff0c;但与C传统的include相比&#xff0c;则是显得“先进…

程序员不得不知道的三大编程语言,看看你了解吗?

作为一名合格的程序员&#xff0c;不仅要有过硬的技术&#xff0c;还要了解许多基础知识。编程语言可是程序员工作的主力军&#xff0c;但是它是如何产生和发展的&#xff0c;你知道吗&#xff1f;接下来就让我们一起来看看编程语言和它们的发展吧&#xff01;记得点赞加收藏哦…

自学SLAM(6)相机与图像实践:OpenCV处理图像与图像拼接(点云)

前言 如果写过SLAM14讲第一次的作业&#xff0c;或者看过我之前的运行ORB_SLAM2教程应该都安装过OpenCV了&#xff0c;如果没有安装&#xff0c;没关系&#xff0c;可以看我之前的博客&#xff0c;里面有如何安装OpenCV。 链接: 运行ORB-SLAM2&#xff08;含OpenCV的安装&…

【AI视野·今日NLP 自然语言处理论文速览 第六十一期】Tue, 24 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 24 Oct 2023 (showing first 100 of 207 entries) Totally 100 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers LINC: A Neurosymbolic Approach for Logical Reasoning by Combining …