1. export default 在一个模块里只能有一个,但是export可以有多个
//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
2.模块中通过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
3. export default
与export
语法差异。
export var e1='...'
是合法语句,但是export default var e2='...'
是不合法的(let
和const
也一样)。export default
可以直接添加标识符导出,例如export default e2
;export
如果要导出已经声明的表示符,必须使用{}
,例如export {e1}
,注意:这里{}
不是声明一个对象。
最后:模块导出的属性或者方法只能在模块内部修改,不能在导入模块的地方修改。