ES6命名导出与默认导出差异：为何变量修改后输出结果不同？

情况1：命名导出（输出符合预期） #

App.js #

import * as a from "./a.js";
console.log("a：", a.a); // 输出 "a： a1 "

a.js #

let a = "a0";
export { a };
a = "a1";

情况2：默认导出（输出不符合预期） #

App.js #

import a from "./a.js";
console.log("a：", a); // 输出 "a： a0" ★★★

a.js #

let a = "a0";
export default a;
a = "a1";

差异原因 #

核心在于两种导出方式的底层逻辑不同：

• 命名导出：export { a } 导出的是变量a的绑定关系。导入端拿到的是和原模块变量直接关联的引用，当原模块里a的值被修改时，导入端访问到的会是更新后的实时值。
• 默认导出：export default a 导出的是变量a当前的具体值。这相当于把"a0"这个值做了一份快照导出，后续原模块中a被重新赋值为"a1"，并不会影响已经导出的那个快照值——因为默认导出是值的传递，而非绑定引用。

直白点说：命名导出是"牵着手一起变"，默认导出是"拍张照片给你，我自己再变和你没关系"。

内容的提问来源于stack exchange，提问作者Yao Tao