import、export、export default的理解

1、import、export

ES6模块主要有两个功能：import（导入）和export（导出）

import: 用于在一个模块中加载另一个含有export接口的模块。
export: 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口.

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

代码示例

新建a.js与b.js

1、输出变量

//a.js
 var name1="李四";
 var name2="张三";
 export name1;
 export name2;
 //export { name1 ,name2 }

//b.js
import { name1, name2 } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return {}
  },
  created(){
    alert(name1)//弹出“李四”
    alert(name2)//弹出“张三”
  }

注： 导出多个变量用大括号包裹，单个变量可以不用。（函数、文件相同）

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

2、输出函数和类

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。

---

2、export、export default

export default命令，为模块指定默认输出。

相同点

1、export与export default均可用于导出常量、函数、文件、模块等。
2、均可以通过import将其导入使用。

不同点

1、在一个文件或模块中，import、export可以有多个，export default仅有一个。
2、通过export方式导出，在导入时要加{}，export default则不需要。
3、使用export default命令，为模块指定默认输出，不需要知道加载模块的变量名。

代码示例

1、输出变量

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

2、输出函数

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

模块中通过export 导出的(属性或者方法)可以修改（只能在模块内部修改），但是通过export default导出的不可以修改。

3、export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, boo};

上面代码中，export和import语句可以结合在一起，写成一行。

模块的接口改名和整体输出，也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

默认接口的写法如下。

export { default } from 'foo';

具名接口改为默认接口的写法如下。

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

同样地，默认接口也可以改名为具名接口。

export { default as es6 } from './someModule';

另外，ES7有一个提案，简化先输入后输出的写法，拿掉输出时的大括号。

// 现行的写法
export {v} from 'mod';

// 提案的写法
export v from 'mod';

---