export和export default的区别（简述）

じòぴé南冸じょうげん

已于 2024-02-28 12:32:21 修改

阅读量1.3k

点赞数 20

文章标签：前端 javascript vue

于 2024-02-28 12:31:32 首次发布

本文链接：https://blog.csdn.net/qq_71214810/article/details/136339003

版权

什么是export和export default？

如果上面的举例还是不明白，可以看看下面这个代码，你应该能很清楚的知道了哦

什么是export和export default？

在ES6（ECMAScript 2015）及其后续版本中，export 和 export default 是两种导出模块内容的方法，它们在前端（以及后端或其他任何JavaScript环境）中都很有用。

我们可以通过这两种，从模块中导出变量、函数、类或对象。其他模块可以通过import导入命名项来使用它们。

export：

可以从模块中导出多个变量、函数、类或对象。其他模块可以通过导入这些特定的命名项来使用它们。

示例：

现在，假设我们有一个名为 my.js 的模块，它使用默认导出：

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

// my.js  
//变量
export let str= "我是export的str";  
export  let num=5201314;
//函数
export function str_num(sth) {   
  return str+num;
}

上面每次需要写export，太麻烦了，简化一下,写在文件的末尾通过一个对象导出多个：

// my.js  
//变量
let str= "我是export的str";  
let num=5201314;
//函数
function str_num(sth) {   
  return str+num;
}

export {
str,num,str_num
}

起别名：

假如在引入的文件中可能存在重复的名称，就可以用as来对导出的数据起个别名（相当于外号，就如同班同学一样的名字，需要区分一下，像大龙小龙之类）

// my.js  

export {
str as newStr,num as newNum,str_num as newStrNum
}

引入使用：

导入的时候需要带花括号{}，将每个变量函数名写清楚,如使用了别名就需要引入的为别名


import { str,num, str_num} from 'xxx路径(./my.js)';
//或
import { newStr,newNum, newStrNum} from 'xxx路径(./my.js)';

export default：

export default 允许你导出一个模块的默认导出。这意味着其他模块在导入时不需要知道导出的具体名称，可以使用任何名称来引用它。每个模块只能有一个默认导出。

这个也可以用上面的as进行起别名，都一样的

// my1.js  
  
const defaultStr = "你好呀，我是默认是str";  
  
export default defaultStr;

引入：

export default只能使用一次。所以，import命令后面才不用加花括号{}

// my1.js  
  
import defaultStr from './my1.js';

注意点：

1.export default与export不要同时使用

2.单个导出使用export default（默认导出），多个导出使用export

3.在一个文件或模块中，export、import可以有多个，export default仅有一个

导入导出的应用：

场景：

在一个文件中导入多个其他JavaScript文件，并重新导出这些文件中的内容，再在其他的页面使用。

举例：

假设你有三个文件：fileA.js、fileB.js 和你想要重新导出的 index.js。

`fileA.js` 的内容如下：

// fileA.js  
export const somethingFromA = '这是文件 A';  

export function doSomethingA() {  
  console.log('在fileA做些奇怪的事情');  
}

`fileA.js` 的内容如下：

// fileB.js  
export const somethingFromB = '这是文件 B';  

export function doSomethingB() {  
  console.log('在fileB做些奇怪的事情');  
}

在 `index.js` 文件中：

你需要通过*号来导入上面的文件内的所有，再通过export进行导出

// index.js  
import * as A from './fileA';  
import * as B from './fileB';  
  
// 重新导出 fileA.js 的内容  
export { somethingFromA, doSomethingA } from './fileA';  
  
// 重新导出 fileB.js 的内容  
export { somethingFromB, doSomethingB } from './fileB';  

// 或者，如果你想要简化，你可以直接使用之前导入的命名空间  
export { A as fileA, B as fileB };

这个文件中导入了 fileA.js 和 fileB.js 中的所有内容，并且使用 export { ... } from '...'; 语法重新导出了它们。这样，其他文件可以通过导入 index.js 来访问fileA.js和 fileB.js 中导出的内容。

要简化代码，你可以直接导出之前导入的命名空间（A 和 B），这样其他文件可以通过解构赋值来访问 fileA.js 和 fileB.js 中的内容。但这种方法可能会让使用者不清楚 A 和 B 分别代表什么，因此注释和文档就显得尤为重要。

其他页面使用index的内容：

// someOtherFile.js  
import { somethingFromA, doSomethingA, somethingFromB, doSomethingB, fileA, fileB } from './index';  
  
console.log(somethingFromA); // 输出 "这是文件 A"  
doSomethingA(); // 输出 "在fileA做些奇怪的事情"  
  
console.log(somethingFromB); // 输出 "这是文件 B"  
doSomethingB(); // 输出 "在fileB做些奇怪的事情"  
  
// 访问 fileA 和 fileB 命名空间中的其他内容（如果有的话）  
console.log(fileA); // fileA 命名空间对象  
console.log(fileB); // fileB 命名空间对象

请注意，在实际项目中，过度使用重新导出可能会导致代码难以理解和维护，因此请谨慎使用，并确保代码清晰、易于阅读。

案例：

如果上面的举例还是不明白，可以看看下面这个代码，你应该能很清楚的知道了哦

我注释已经写的很明白了

import { createPinia } from 'pinia'
// -----------------------------------统一导出，代码简洁，入口唯一 一个模块下的所有资源通过index导出
// 先导入 再导出 麻烦
// import { userStore } from './modules/user'
// export  userStore
//----------------------------------------------------------------
// 优化1
// export { userStore } from './modules/user' //相当于 先导入 再导出（import与export复合写法
//----------------------------------------------------------------
// * 整体导入 // 优化2
// import * as m_user from './modules/user'
// console.log(m_user) //输出对象 (导入几个输出几个)
// ----------------------------------------------------------------
// * 整体导入导出  // 优化3
export * from './modules/user'
export * from './modules/consult'

import persist from 'pinia-plugin-persistedstate' //引入 下载pnpm i pinia-plugin-persistedstate

const pinia = createPinia() //创建对象

pinia.use(persist) //使用 pinia-plugin-persistedstate 实现pinia仓库状态持久化

export default pinia //main.js 进行接收

// 这个文件作为stores的出口，一个模块只能默认导出一次

我讲的就这么多哦，希望大家能从中，学到小许，有所帮助。