export default 和 export 的区别

export 和 export default 都是对外暴露成员，但是二者区别是：“export default 则是在 export 的基础上，为规定模块提供一个默认的对外接口”。

export

1、输出方式

• 使用export向外暴露的成员，只能使用{ }来包裹，这种形式，叫做【按需导出】
• export可以向外暴露多个成员

// 直接输出
export let str = 'hello world!!!'

export function fuc() {
    // ...
}

// 先定义在输出
let str1 = 'hello'
let str2 = 'world'
let str3 = '!!!'

function fuc() {
    // ...
}

export {str1, str2, str3, fuc}

2、输入方式

• 当export向外暴露了多个成员，但是某些成员，在import导入时，不需要，可以不在{ }中定义
• 使用export导出的成员，在导入时必须严格按照导出时候的名称，来使用{ }【按需接收】
• 使用export导出的成员，在导入时如果想换个变量名称接收，可以使用as来起别名

import {str1, str2 as str2s} from 'xxx.js'
console.log(str1 + '=======' + str2s); // hello======= world

export default

1、输出方式

• 在一个模块中，export default 只允许向外暴露一次
• 在一个模块中，可以同时使用export default 和export 向外暴露成员

const obj = {
    name: '小红',
    age: 20
}
export default obj

2、输入方式

• export default 向外暴露的成员，可以使用任意变量来接收

import user from 'xxx.js'
console.log(user);

image.png