Webpack的代码分包Vue3中定义异步组件分包refs的使用

一、默认的打包过程:

  • 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中);
    在这里插入图片描述

  • 这个时候随着项目的不断庞大,app.js文件的内容过大,会造成首屏的渲染速度变慢;

打包时,代码的分包:

  • 所以,对于一些不需要立即使用的组件,我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js;
  • 这些chunk.js会在需要时从服务器加载下来,并且运行代码,显示对应的内容;
    那么webpack中如何可以对代码进行分包呢?
    在这里插入图片描述

二、Vue中实现异步组件

https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent
在这里插入图片描述

如果我们的项目过大了,对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理),那么Vue中给我们提供了一个函数:defineAsyncComponent。

defineAsyncComponent接受两种类型的参数:

  • 类型一:工厂函数,该工厂函数需要返回一个Promise对象
  • 类型二:接受一个对象类型,对异步函数进行配置;

工厂函数类型一的写法:
在这里插入图片描述
工厂函数类型二的写法:
在这里插入图片描述

三、异步组件和Suspense结合使用

注意:目前(2021-06-08)Suspense显示的是一个实验性的特性,API随时可能会修改。

Suspense是一个内置的全局组件,该组件有两个插槽:

  • default:如果default可以显示,那么显示default的内容;
  • fallback:如果default无法显示,那么会显示fallback插槽的内容;
    在这里插入图片描述

在这里插入图片描述

四、$refs的使用

某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例:

  • 在Vue开发中我们是不推荐进行DOM操作的;
  • 这个时候,我们可以给元素或者组件绑定一个ref的attribute属性;
    在这里插入图片描述

组件实例有一个$refs属性:

  • 它一个对象Object,持有注册过 ref attribute 的所有 DOM 元素和组件实例。
    在这里插入图片描述
    在这里插入图片描述

五、$parent和$root

我们可以通过$parent来访问父元素。

我们也可以通过$root来实现,因为App是我们的根组件;
在这里插入图片描述

注意:在Vue3中已经移除了$children的属性,所以不可以使用了

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

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

相关文章

经典JS

用apply把document当作this传入getId函数,帮助“修正”this; document.getElementById (function (func) {return function () {return func.apply(document, arguments);} })(document.getElementById);//调用 var getId document.getElementById; var div getI…

组件的v-model Mixin extends

一、组件的v-model 前面我们在input中可以使用v-model来完成双向绑定: 这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事;v-bind:value的数据绑定 和 input的事件监听; 如果我们现在封装了一个组件,其…

springmvcget中文乱码_解决SpringMVC Controller 接收页面传递的中文参数出现乱码的问题...

新配置一个spring的MVC项目,发现对Get请求的中文参数出现了乱码:查看了SpingMVC中关于编码的配置(在web.xml中),如下:encodingFilterorg.springframework.web.filter.CharacterEncodingFilterencodingutf-8forceEncodingtrueencod…

SQL学习之SELECT子句顺序

下面来总计下之前的随笔中所说过的所有的SELECT子句的顺序。 子句            说明            是否必须使用 SELECT 要返回的列或者表达式 是 FROM 从中检索数据的表 …

Vue3过渡动画实现

一、认识动画 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group&…

linux退出 putty_使用putty远程连接linux防止关闭putty程序就停止

如题:有时候我们使用putty连接linux的时候执行某个命令运行程序的时候,关闭putty就会出现应用程序也关闭的情况;这里建议就使用如下命令nohup youcommand &(&可加可不加)这个时候默认会在你当前目录创建一个nohup中创建一个nohup.out…

在Linux下不使用密码远程登陆其他Linux

有时需要再一台Linux上登陆其他Linux服务器,通常可以直接使用SSH命令,加入两台服务器一台服务器A,IP地址192.168.1.2,另一 台服务器B,IP地址192.168.1.3,如果想从A服务器使用root用户登陆B服务器只需要在A服…

Vue3 Composition API(一)——setup、reactive、ref、readonly

一、Options API的弊端 在Vue2中,我们编写组件的方式是Options API: Options API的一大特点就是在对应的属性中编写对应的功能模块;比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变,也包括生…

pandas 读表格_pandas电子表格的读取(pandas中的read_excel)

上面那篇文章中,初步介绍了一个文本文件的读取;接下来介绍另外一种常见的本地数据格式,那就是Excel电子表格,如果读者在学习或者工作中需要使用Python分析某个Excel表格数据,改如何完成第一个的数据读取呢?…

dex文件格式二

一. dex文件头(1) magic value在DexFile.c dexFileParse函数中 会先检查magic opt啥是magic opt呢? 我们刚刚从cache目录拷贝出来的那个前面的dey 036就是magic opt在源码中会先解析magic opt,然后重设dexfile指针重设magic opt指针后开始解析magic value这 8 个 字节一般是…

Vue3 Composition API(二)——computed、watchEffect、setup中使用ref

一、computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理 在前面的Options API中,我们是使用computed选项来完成的;在Composition API中,我们可以在 setup 函数中…

【Git】笔记1

学习廖雪峰Git教程的笔记 Git是什么: Git是目前世界上最先进的分布式版本控制系统 Git与Github的关系:github是一个用git做版本控制的项目托管平台,它为开源项目免费提供Git存储 Git的创建者:Linus,就是创建了linux的那…

支持字典_手把手教你学Python之字典

字典是一种无序可变的容器,字典中的元素都是"键(key):值(value)"对, “键”和“值”之间用冒号隔开,所有“键值对”放在一对大括号“{}”中,元素之间用逗号分隔。在同一个字典中,“键”必须是唯一的&#xf…

Vue3 Composition API(三)——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式

一、生命周期钩子 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项,也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢? 可以使用直接导入的 onX 函数注册生命周期钩子; 二、Provide函数 和…

单尺度二维离散小波重构(逆变换)idwt2

clc,clear all,close all; load woman; %单尺度二维离散小波分解。分解小波函数haar [cA,cH,cV,cD]dwt2(X,haar); %单尺度二维离散小波重构(逆变换) Yidwt2(cA,cH,cV,cD,haar); figure; subplot(1,2,1),imshow(X,map),title(原始图像); subplot(1,2,2),imshow(Y,map),title(重构…

python导出数据顿号做分隔符_Python语言和matplotlib库做数据可视化分析

这是我的第51篇原创文章,关于数据可视化分析。阅读完本文,你可以知道:1 Python语言的可视化库—matplotlib?2 使用matplotlib实现常用的可视化?0前言数据记者和信息设计师,David McCandless,在他的TED演讲…

Vue3 高级语法(一)—— h函数、jsx

一、认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器; 前面我们讲解过VNode和VDOM的改变&#…

android学习笔记30——AndroidMainfest.xml

Manifest.xml文件的职责:指定APP的包名.声明四大组件, 以及启动方式.指定APP运行的进程名称.指定APP权限.指定最小API版本.指定需要连接的库. Manifest.xml的格式:<?xml version"1.0" encoding"utf-8"?> <manifest> <uses-permission /…

华三交换机ping大包命令_华三交换机常用命令

1、查看全部端口的配置display current-configurationdisplay current-configuration interfacedis cu int2、查看指定端口的配置display current-configuration interface 或interface 进入端口配置模式display this 查看当前端口生效配置其中int-type和int-number为端口…

Vue3 高级语法(二)—— 自定义指令、Teleport、Vue插件

一、认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令&#xff1a;v-show、v-for、v-model等等&#xff0c;除了使用这些指令之外&#xff0c;Vue也允许我们来自定义自己的指令。 注意&#xff1a;在Vue中&#xff0c;代码的复用和抽象主要还是通过组件&#xff1b;通…