【Vue】import和export

module.exports和exports是属于commonJs规范对应require，export和export
default是ES6规范对应import。

ES6 module

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

除了静态加载带来的各种好处，ES6 模块还有以下好处。

• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
• 将来浏览器的新 API 就能用模块格式提供，不再必要做成全局变量或者navigator对象的属性。
• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

使用

在vue开发的过程中，常用到暴露和引入，常见的暴露与引入方式是通过export暴露通过import引入，下面分别讲解一下：分别暴露、统一暴露、默认暴露的应用场景和使用方法

分别暴露

应用场景：用于一个文件内暴露多个属性的场景，分别暴露，每一个属性都进行暴露

//暴露
export  const a =()=>{
    console.log(999);
} 
export  const b = 2
export  const c = 1 
//引入
import {a,b,c} from '@/api/api'
//使用：可直接通过a,b,c获取
created(){
    a()
    console.log(b,c);
  }

统一暴露

应用场景：用于一个文件内暴露多个属性的场景，统一进行暴露

//暴露
const a =()=>{
    console.log(999);
} 
const b = 2
const c = 1 
export{a,b,c}
//引入
import {a,b,c} from '@/api/api'
//使用
created(){
    a()
    console.log(b,c);
  }

默认暴露

应用场景：对于只需要暴露一个属性的时候使用

//暴露
const a =(data)=>{
    return data+1
} 
 
export default a
//引入
import a from '@/api/api'
 
//使用
created(){
    console.log(a(5));
  }

简单说明

主要用于封装一些方法，然后进行引入，简化代码，提高代码复用率

来源

ES6 module
vue中 export / import 的使用