Vue中import和require的对比
Vue中import和require的对比
一、前言
vue框架想必是我们前端朋友们必学的知识点,说它难也没有那么难,说简单也没有那么简单,主要技术就是那么几个,可是里面的细节很多,有些时候我们会用但未必知道他为什么要这么用,原理是是什么,就比如我们最为常见的导入方式——import和require,很多时候我们都会用得比较混淆,为了更清楚地很轻两者的关系,博主就特地写了这篇博文。
二、import和require的核心概念
require:在导出的文件中定义module.export,导出的对象的类型不予限定(可以是任何类型,字符串,变量,对象,方法),在引入的文件中调用require()方法引入对象即可。
import:导出的对象必须与模块中的值一一对应,即导出的对象与整个模块进行解构赋值
点击查看代码
//a.js中
export default{ //(最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{})
a: function(){
console.log("impot的使用")
}
}
export function(){ //导出函数
}
export {newA as a ,b,c} // 解构赋值语法(as关键字在这里表示将newA作为a的数据接口暴露给外部,外部不能直接访问a)
//b.js中
import a from '...' //import常用语法(需要export中带有default关键字)可以任意指定import的名称
import {...} from '...' // 基本方式,导入的对象需要与export对象进行解构赋值。
import a as biubiubiu from '...' //使用as关键字,这里表示将a代表biubiubiu引入(当变量名称有冲突时可以使用这种方式解决冲突)
import {a as biubiubiu,b,c} //as关键字的其他使用方法
三、区别
- require 的使用过程就是赋值过程,并且只有运行时才执行,有更多的操作, 而import 是解构过程,并且是在编译时执行;
- require可以理解为是一个全局方法,可以在文件中的任何位置执行,而import则必须要写在文件的顶部或被使用代码的上面,不能嵌套在条件语句中,不然会报错;
- require的性能相对于import稍低,require是在运行时才引入模块并且还赋值给某个变量,而import需要依据import中的接口在编译时引入指定模块
四、Require优点
- 很好地实现js文件的异步加载,避免网页失去响应;
- 能够管理模块之间的依赖性,便于代码的编写和维护;
- 使用起来简单直接,它相当于是module.exports的一个传送门,把module.exports后面的内容是传给require的结果;
- 性能相对要高一些。
Vue中import和require的对比的更多相关文章
- Vue中import from的来源--省略后缀与加载文件夹
Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...
- Vue中import引入模块路径时的@符号
1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的接口 . import:用于在一个 ...
- vue中import引入模块路径中@符号是什么意思
在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...
- vue 中import和export如何一起使用(一)
前段时间碰到一个问题,vue js中要使用import来加载第三方的js,但是后面使用exports.XXX的话会报exports is not defined.那要怎么解决呢? 首先,我们要了解ES ...
- Vue中import '@...'是什么
今天看新项目代码,有import '@/assets/css/theme/index.css'一类的代码,里面的@是做什么的呢. 找到这篇文章https://www.cnblogs.com/bos ...
- Vue中import '@...'的意思
转载: https://blog.csdn.net/xiazeqiang2018/article/details/81325996 写项目的时候看到很多导入都是@开头,这是webpack的路径别名,相 ...
- Vue中import用法
1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...
- vue中import xxx from 和 import {xxx} from的区别
1.import xxx from import FunName from ‘../xxx’ 对应js中的引用: export defualt function FunName() { return ...
- 关于VUE中 import 、 export 和 export default 的注意问题
1.import引入一个依赖包,不需要相对路径.import 引入一个自己写的js文件,是需要相对路径的. 示例:import axios from ‘axios’; import AppServic ...
随机推荐
- Solution -「NOI.AC 省选膜你赛」寄蒜几盒
题目 题意简述 给定一个含有 \(n\) 个顶点的凸多边形( \(n\) 是偶数),对于每一对相对的边(即中间有 \(\frac{n}2-1\) 条其它边),延长它们以将平面分割为多块,并把包含原 ...
- Solution -「AGC 026D」Histogram Coloring
\(\mathcal{Description}\) Link. 有 \(n\) 列下底对齐的方格纸排成一行,第 \(i\) 列有 \(h_i\) 个方格.将每个方格染成黑色或白色,求使得任意完 ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第01章 - 创建CA证书和kubectl集群管理命令
文章目录 1.kubernetes集群部署 1.0.创建CA证书和秘钥 1.0.0.安装cfssl工具 1.0.1.创建根证书 1.0.2.创建证书签名请求文件 1.0.3.生成CA证书和秘钥 1.0 ...
- shell脚本之判断当前内核主版本是否为3,且次版本是否大于10
[root@localhost ~]# cat uname.sh #!/bin/bash main=`uname -r | awk -F . '{print $1}'` minor=`uname -r ...
- Spring Boot数据访问之数据源自动配置
Spring Boot提供自动配置的数据访问,首先体验下,Spring Boot使用2.5.5版本: 1)导入坐标: 2.5.25版本支持8.0.26mysql数据库驱动.spring-boot-st ...
- apache缺少模块解决方法
找到一台老古董机器 [root@resource conf]# cat /etc/redhat-release CentOS release 5.6 (Final) [root@resource co ...
- Ansible-DevOps
Ansible-DevOps Ansible 搭建 CentOS7 yum install epel-release yum search ansible yum install ansible -y ...
- 李宏毅机器学习笔记——新手感悟——PM2.5作业
python也不会,计算机也不会,啥都不会,只带了个脑子考了计算机研究生.研究生选了人工智能方向.看来注定是漫长的学习之旅. PM2.5作业,我是一个字都看不懂.所以我采用了直接看答案的方案.把答案看 ...
- 三大流行BI分析平台推荐,企业数据化选择工具
进入大数据时代以来,对于企业来说,海量的数据不仅是财富,也是负担.无论是大型企业还是小型企业,都面临着同样的挑战--如何利用大数据客户体验,有效达到优化生产力的效果.这也是近年来许多企业选择搭建现代大 ...
- windev中自定义选定列的使用和注意事项
windev系统默认的多选,需要使用Ctrl+或者Shift+来点选,使用并不方便,所以我们一般在首列增加checkbox列,并在行头增加一个checkbox控制,作为全选使用.使用这个方法时,有几个 ...