ES6 export && export default 差别总结

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
复制代码

首先须要了解到：

1. ES6中模块经过export和export default暴露出来的属性或者方式并非普通的赋值或者引用，它们是对模块内部定义的标志符相似指针的绑定。
2. 对于一个导出的属性或者方法，在什么地方导出不重要，在何时导入也不重要，重要的是:访问这这个绑定的时候的当前值。

   //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语法差别。

1. export var e1='...' 是合法语句，可是export default var e2='...'是不合法的（let和const也同样）。
2. export default能够直接添加标识符导出，例如export default e2;export若是要导出已经声明的表示符,必须使用{},例如export {e1},注意：这里{}不是声明一个对象。

最后：模块导出的属性或者方法只能在模块内部修改，不能在导入模块的地方修改。