vue中的import、export、requre的区别
在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现。在es6发布之后js又引入了import的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解,在查阅了相关资料之后在此记录下自己的小小见解。
- require的基本语法
核心概念:在导出的文件中定义module.export,导出的对象的类型不予限定(可以是任何类型,字符串,变量,对象,方法),在引入的文件中调用require()方法引入对象即可。
//a.js中
module.export = {
a: function(){
console.log(666)
}
}
//b.js中
var obj = require('../a.js')
obj.a() //666
【注】:本质上是将要导出的对象赋值给module这个的对象的export属性,在其他文件中通过require这个方法访问该属性
- import的基本语法
核心概念:导出的对象必须与模块中的值一一对应,换一种说法就是导出的对象与整个模块进行结构赋值。对的,你没有听错。抓住重点,解构赋值!!!!!
//a.js中
export default{ //(最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{})
a: function(){
console.log(666)
}
}
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必须写在文件的顶部。
var a = require(a() + '/ab.js')
require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量,而import只需要依据import中的接口在编译时引入指定模块所以性能稍高
- 在commom.js 中module.export 之后 导出的值就不能再变化,但是在es6的export中是可以的。
var a = 6
export default {a}
a = 7 //在es6中的export可以
var a = 6
module.export = a
a = 7 //在common.js中,这样是错误的
作者:
链接:https://www.imooc.com/article/22371
来源:慕课网
vue中的import、export、requre的区别的更多相关文章
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- 在vue中使用import()来代替require.ensure()实现代码打包分离
最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue 中使用import导入 script 在线链接
一般我们在vue中导入另外一个文件或者文件中的方法,我们都是使用import来实现他的,那么问题来了,现在我们要导入的不是另外的一个文件,而是在线链接,这该怎么办?我们也使用了 import * as ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- es6中的import,export浏览器已经支持
直接上代码, 成功测验了es6的新特性 import , export语法. 服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段. ind ...
- ES5和ES6中关于import & export的书写方式的区别
ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...
随机推荐
- Java遍历Map对象的方式
public static void main(String[] args) { HashMap<String, String> testMap = new HashMap<> ...
- js EL 正则表达式
<script> //校验是否全由数字组成20位数 var patrn=/^[0-9]{1,20}$/; alert(patrn.test("-30000000000" ...
- kafka consumer防止数据丢失(转)
http://kane-xie.iteye.com/blog/2225085 kafka最初是被LinkedIn设计用来处理log的分布式消息系统,因此它的着眼点不在数据的安全性(log偶尔丢几条无所 ...
- hash的排序(转载)
sort函数 sort LISTsort BLOCK LISTsort SUBNAME LIST sort 的用法有如上3种形式.它对LIST进行排序,并返回排序后的列表.假如忽略了SUBNAME或B ...
- SQL Server事务
事务全部是关于原子性的.原子性的概念是指可以把一些事情当做一个单元来看待.从数据库的角度看,它是指应全部执行或全部都不执行的一条或多条语句的最小组合.为了理解事务的概念,需要能够定义非常明确的边界.事 ...
- sysctl-p报错:error: "net.bridge.bridge-nf-call-ip6ta
1.刚配置完sysctl,加载时报错:[root@itpux1 yum.repos.d]# sysctl -pnet.ipv4.ip_forward = 0net.ipv4.conf.default. ...
- 获取mysql 配置和目录
http://bbs.csdn.net/topics/390620630 mysql> show variables like '%dir%';+------------------------ ...
- ARCore中Pose类变换点的算法实现
ARCore中Pose类变换点的算法实现,主要分为两步,分别是平移和旋转. 1. 旋转向量:通过四元数计算旋转后的向量 参数列表:q表示四元数, v是长度为4的float数组,表示待旋转的向量, ...
- IDLE的GUI交互模式下完美清屏
IDLE的GUI交互模式下完美清屏==============================================================================1.首先把 ...
- 析构方法(__del__)
析构方法,当对象在内存中被释放时(也就是实例执行完了,实例的内存就会自动释放,这时候就会触发),自动触发执行. 当程序结束时,python只会回收自己的内存空间,即用户态内存,而操作系统的资源则没有被 ...