es6 export和export default的区别
相同点
export
与export default
均可用于导出常量、函数、文件、模块- 可在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
不同点
一、在一个文件或模块中,export、import
可以有多个,export default
仅有一个
//model.js
let e1='export 1';
let e2='export 2';
let e3='export 3';
let e4='export 4';
export {e2};
export {e3};
export {e4};
export default e1;
//使用模块的index.js
import e1, {e2, e3, e4} from "./model";
console.log(e1);
console.log(e2);
console.log(e3);
console.log(e4);
#index.js运行结果
export 1
export 2
export 3
export 4
如果在 model.js 再添加一个
export default
//model.js
let e5='export e5';
export default e5
#运行结果
SyntaxError: .../model.js:
Only one default export allowed per module. (10:0)
9 | let e5='export e5';
> 10 | export default e5
二、模块中通过 export
导出的(属性或者方法)可以修改,但是通过 export default
导出的不可以修改
//model.js
let e1='export 1';
let e2='export 2';
export {e2};
export default e1;
e1='export 1 modified';
e2='export 2 modified';
//index.js
import e1, {e2}from "./model";
console.log(e1);
console.log(e2);
#index.js执行结果
export 1
export 2 modified
首先需要了解到:
ES6中模块通过 export
和 export default
暴露出来的属性或者方式并不是普通的赋值或者引用,它们是对模块内部定义的标志符类似指针的绑定。
对于一个导出的属性或者方法,在什么地方导出不重要,在什么时候导入也不重要,重要的是:访问这这个绑定的时候的当前值。
//model.js
let e1='export 1';
let e2='export 2';
export {e2};
export default e1;
e1='export 1 modified';
setTimeout(()=>{
e2='export 2 modified';
},1000);
//index.js
import e1, {e2}from "./model";
console.log(e1);
console.log(e2);
setTimeout(()=>{
console.log('later',e2)
},5000);
//index.js执行结果
export 1
export 2
later export 2 modified
但是,export
是绑定到标识符,改变标志符的值,然后访问这个绑定,得到的是新值;
export default
绑定的是标志符指向的值,如果修改标志符指向另一个值,这个绑定的值不会发生变化。
如果想修改默认导出的值,可以使用 export {e1 as default}
这种方法。
//model.js修改
export {e1 as default}
#index.js执行结果
export 1 modified
export 2
later export 2 modified
三、export default
与 export
语法差异。
export var e1='...'
是合法语句,但是 export default var e2='...'
是不合法的(let
和 const
也一样)。
export default
可以直接添加标识符导出,例如 export default e2
;
export
如果要导出已经声明的表示符,必须使用 {}
,例如 export {e1}
,注意:这里 {}
不是声明一个对象。
模块导出的属性或者方法只能在模块内部修改,不能在导入模块的地方修改。
https://blog.csdn.net/ZYC88888/article/details/82501791
https://juejin.cn/post/6844903585805762573