export与export default的区别

简单概括：

1.在一个js文件中，export可以多次使用，export default只能使用一次

2.export最后导出的是一个对象，其导出的内容会被放入此对象中，在导入时用解构赋值来取值比较方便；export default导出时是什么，导入时就是什么。

3.export default后面不可以用 var、let、const， 可用 export default function(){} function add(){}

 

export:

// test.js
export const a = 'string1'
export const b = [1,2,3]
export const c = function () {}
export function d () {}
// 等价于
const a = 'string1'
const b = [1,2,3]
const c = function () {}
function d () {}
export {
  a,
  b,
  c,
  d
}

// 导入
import {a,b,c,d} from '@/api/test.js'
// 使用as重命名
import {a as aa,b as bb,c as cc,d as dd} from '@/api/test.js'
console.log(aa);//'string1'

 

export default:

export default function add(){
  console.log(1)
}

// 导入
import fn from '@/api/def.js'
fn();// 1

//不管导入前的导出项是否命名，导入后都按导入时新的命名来调用

 

export + export default:

// 导出
export const fileType = function (name) {
    console.log(name)
}
export default function (name) {
    console.log(name)
}
// 导入
import * as fileType from '@/utils/type'
fileType.fileType ('aaa')    // aaa
fileType.default ('sss')    // sss

fileType打印：


// 或者
import fileTypedefault,{ fileType } from '@/utils/type'
fileType ('aaa')    // aaa export
fileTypedefault ('sss')    // sss export default