揭开Vue异步组件的神秘大毛巾 是的 就是大毛巾


简介

在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue中使用异步组件也很简单:

// AsyncComponent.vue
<template>
<div>我是异步组件的内容</div>
</template>

<script>
export default {
name: 'AsyncComponent'
}
</script>
// App.vue
<template>
<div id="app">
<AsyncComponent v-if="show"></AsyncComponent>
<button @click="load">加载</button>
</div>
</template>

<script>
export default {
name: 'App',
components: {
AsyncComponent: () => import('./AsyncComponent'),
},
data() {
return {
show: false,
}
},
methods: {
load() {
this.show = true
},
},
}
</script>

我们没有直接引入AsyncComponent组件进行注册,而是使用import()方法来动态的加载,import()是ES2015 Loader 规范 定义的一个方法,webpack内置支持,会把AsyncComponent组件的内容单独打成一个js文件,页面初始不会加载,点击加载按钮后才会去请求,该方法会返回一个promise,接下来,我们从源码角度详细看看这一过程。

通过本文,你可以了解Vue对于异步组件的处理过程以及webpack的资源加载过程。

编译产物

首先我们打个包,生成了三个js文件:

image-20211214194854431.png

第一个文件是我们应用的入口文件,里面包含了main.jsApp.vue的内容,另外还包含了一些webpack注入的方法,第二个文件就是我们的异步组件AsyncComponent的内容,第三个文件是其他一些公共库的内容,比如Vue

然后我们看看App.vue编译后的内容:

image-20211224161447196.png

上图为App组件的选项对象,可以看到异步组件的注册方式,是一个函数。

image-20211224161252075.png

上图是App.vue模板部分编译后的渲染函数,当_vm.showtrue的时候,会执行_c('AsyncComponent'),否则执行_vm._e(),创建一个空的VNode_ccreateElement方法:

vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };


相關推薦

2024-07-04

计划比你想象的还要深远。我愿意成为你的引路人,帮你揭开‘织梦者’的面纱,但你必须小心,一旦踏入这场游戏,就没有回头路。” 小明凝视着屏幕,心中五味杂陈。他知道,接受这份帮助意味着他将正式卷入一场暗流涌

2023-06-12

是否存在 Bucket 名是否存在,包括 Service、REST API 和前端异步校验处理 Bucket 创建 创建 Bucket,包括 Service、REST API 和前端Validation校验处理 Bucket 删除 删除 Bucket,包括 Service、REST API 和前端展示处理 Bucket 加密设

2024-07-12

并且是扫描规则很粗暴,是扫描到带 @Component 或 @Bean 的组件,直接实例化并放入容器。后来想为 @Bean 方法增加参数,也就是为普通方法增加注入功能,但此时发现,几乎很难实现。因为我不知道此时要注入的 bean 存不存在,特

2023-07-13

新发布项目一:跨端、跨框架、跨版本企业级应用前端组件库—OpenTiny OpenTiny是华为云开源的Web应用前端开发套件,涵盖Vue2/Vue3/Angular多技术栈,拥有主题配置系统/中后台模板/CLI命令行等工具库。OpenTiny经过九年持续打磨,

2023-04-01

OpenTiny 是一套华为云出品的企业级组件库解决方案,适配 PC 端/移动端等多端,涵盖 Vue2 / Vue3 / Angular 多技术栈,拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具,可帮助开发者高效开发 Web 应用。 OpenTiny 孵化自

2022-09-07

微软此前已经发布了适用于 React 和 Angular 的 Power BI 组件,这使得两大知名前端框架能够在利用它们的 Web 应用中直接使用各种 Power BI 功能。如今微软再接再厉,为另一大知名框架 Vue.js 也引入了 Power BI 组件,至此前端三大框架

2023-01-07

更新内容: [修复] badge 组件 color 属性失效的问题。 [修复] barcode 组件属性缺少响应式的能力。 [修复] treeSelect 多选模式 值 无法删除的问题。 [修复] qrcode 组件 backgroundColor 属性必填警告。 [修复] treeSelect 多选模式 change 事件多

2023-07-02

本次 3.9.0 版本主要推出以下新特性: 新增 Drawer 抽屉组件 新增 Guide 引导组件 新增 PopConfirm 气泡确认框组件 支持 SSR 服务器端渲染 OpenTiny 新增了一名贡献者 @KevinAndrewDong,感谢 @KevinAndrewDong 对 OpenTiny Vue 3.9.0 版本的贡

2023-08-30

为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助网站快速成型。除此以外,还有基于 Vue 3.0 的桌面端组件库 Element Plus。 Element 2.15.14 现已正式发布,该版本更新内容如下: Bug 修复

2023-08-26

含的子系统 优化 fileupload 增加缩略图生成设置,前端组件可使用 imageThumbName 使用缩略图 优化 fileupload 使用 returnPath 时的下载还原原始文件名 优化 翰高数据库有原来的 oracle 语法换为原生 postgresql 语法 优化 导出,

2024-10-16

新 另外这个版本,我们还修复了一直以来困扰开发者的异步循环中的并发问题。 提供了域名版本的dtd文件。 完整更新列表 特性 #IASS9Z 新的JavaX脚本插件,支持java8~java17的所有语法特性 https://gitee.com/dromara/liteFlow/issues/IASS9

2023-03-12

端分离。使用vue3/vite、Element Plus UI、 axios数据请求、页面异步加载。PC前端的页面全新改版,更新优化了页面DIY可视化装修、IM客服系统等内容。 1. 采用全新技术构架,实现前后端分离。v4.0采用vue3 web前端框架,将HTML+JavaScript传

2022-04-01

的进展时间线: 下面就来一起看看这个被网传了2天的神秘漏洞的官宣内容和解决方案。 影响范围 该漏洞的利用需要满足下面的条件: JDK 9 + 使用Apache Tomcat部署 使用WAR方式打包 依赖spring-webmvc或spring-webflux 虽然可能国内大

2022-12-08

一股“神秘力量”使得知名前端框架 Vue 的周 npm 下载量激增十倍,以至于 Vue 创始人尤雨溪发推解释:“我也不知道谁搞出来的,请搞出这事的人赶紧修复吧,这样会搞得统计数据毫无意义。” 从 NPM Trends 页面上可以看到,