export 与export default区别与使用浅析

export

【 导出 】
一个页面可以有多个 export，如下（列举了不同的导出类型）,demo.js页面：

export const a = "funny"  //直接定义并导出一个变量
export function b(sth) {  //直接定义并导出一个函数
    console.log(sth);
}
const c = 7
export { c }   //先定义再导出一个变量，这里c需要使用 { } 包裹。为什么要用{}包裹？因 export c的实质是export 7，无法进行解构，则报错(其他类型如function的导出同理)
export { c as nc }  //先定义再导出一个变量，并在导出的同时重命名，这里将c重命名成nc并导出
const d = 8
const e = 9
export { d , e }  //先定义再导出多个变量


【 导入 】
需要知道 export 抛出的变量名或函数名（这个实质是使用了es6的解构赋值）。换种说法就是：import 需要加 { }

import { a , b } from './demo.js'  //按需导入所需内容，务必以 { } 形式解构导入
//若希望在引入的同时重命名，则可import { a , b as nb } from './demo.js'，这里b被重命名成了nb
alert( a )
b('happy')

import * as handles from './demo.js'  //一次性引入全部，并以handles命名
alert(handles.a)
handles.b('happy')

export default

【 导出 】一个页面只能有一个 export default，如下，demo.js页面：

const a = "funny"
function b(sth) { 
    console.log(sth);
}
①：仅导出一个：export default { a }  //实质上导出的是：export default {a:a}
②：导出多个：export default { a , b }
//export default 导出的应该是一个对象，在export上不适用
const obj={a:"123"}
export default obj 

【 导入 】
import {default as data} from "./demo.js"  //固定写法，可以这么写，但是一般不用

import data from "./demo.js"  //上面写法的简便形式（常用）：自定义一个名称（如data）整体导入。（data不需要使用{ }包裹）
alert( data.a )
data.b("happy")

TIPS

【导入与导出】的两种方式
第一种：
import GlobalHeader from './global-header/index.vue';
import GlobalFooter from './global-footer/index.vue';
export { GlobalHeader, GlobalFooter };

第二种：
const GlobalHeader = () => import('./global-header/index.vue');
const GlobalFooter = () => import('./global-footer/index.vue');
export { GlobalHeader, GlobalFooter };




【导出中转】举例：b.js中转a.js中的所有内容
【a.js】
const text1="funny"
const text2="happy"
export {
    text1,
    text2
}

【b.js】
export * from "./a"

【c.js】
import {text1,text2} from "./b"
等同于
import {text1,text2} from "./a"