浅谈module.exports、export default、export，三者区别

前言：在vue项目开发中经常会用到导入和导出模块、方法、变量等，那到底该使用那个方法呢？module.exports、export default、export，三者用哪一个啊？今天来聊聊个人鄙见，欢迎加我技术交流QQ群 ：811956471

新建common/js/clearCache.js，一下演示均在该文件中进行

一：export{} （推荐）

let a = "123";
let b = "456";
const cs="导出常量";
let obj={
    m:0,
    k:1
}
let fn1 = function() {
    console.log("export可以导出fn1方法吗？")
}
function fn2() {
    console.log("export可以导出fn2方法吗？")
}

导出

export {
    a,
    b,
    cs,
    obj,
    fn1,
    fn2
}

导入

import {a,b,obj,cs,fn1,fn2} from '@/common/js/clearCache.js'

打印结果：

console.log("测试：",a,b,obj,cs)
fn1();
fn2()
/*
//测试： 123 456 {m: 0, k: 1} cs导出常量
clearCache.js:9 export可以导出fn1方法吗？
clearCache.js:12 export可以导出fn2方法吗？
*/

总结：export{}可以导出变量、常量、方法、对象、但是在导入的时候需要用{}分别引入导出的名称，{}里面的名称需要和到处时的名称一致，顺序可以不一致，优点是可以按需导入，提高性能。

二：export default{}

导出

let a = "123";
let b = "456";
const cs="导出常量";
let obj={
    m:0,
    k:1
}
let fn1 = function() {
    console.log("export default可以导出fn1方法吗？")
}
function fn2() {
    console.log("export default可以导出fn2方法吗？")
}
export default{
    a,
    b,
    cs,
    obj,
    fn1,
    fn2
}

导入

import a from '@/common/js/clearCache.js'

打印结果：

console.log("测试：",a)
/*
{a: "123", b: "456", cs: "cs导出常量", obj: {…}, fn1: ƒ, …}
a: "123"
b: "456"
cs: "cs导出常量"
fn1: ƒ fn1()
fn2: ƒ fn2()
obj: {m: 0, k: 1}
*/

总结：export default{}可以导出变量、常量、方法、对象、无需使用{}，但是弊端是全部导入，不能按需导入。

三：module.exports = {}

let a = "123";
let b = "456";
const cs="导出常量";
let obj={
    m:0,
    k:1
};
let fn1 = function() {
    console.log("export default可以导出fn1方法吗？")
};
function fn2() {
    console.log("export default可以导出fn2方法吗？")
};
module.exports = {
    a,
    b,
    cs,
    obj,
    fn1,
    fn2
}

导入

import a from '@/common/js/clearCache.js'

打印结果：

console.log("测试：",a)
/*
{a: "123", b: "456", cs: "cs导出常量", obj: {…}, fn1: ƒ, …}
a: "123"
b: "456"
cs: "cs导出常量"
fn1: ƒ fn1()
fn2: ƒ fn2()
obj: {m: 0, k: 1}
*/

总结：module.exports = {}，可以导出变量、常量、方法、对象、导入的时候不能按需导入，只能一次性导入所有内容，类似于export default{}