Javascript 直接导入ES6模块元素或在导入后分解结构常量分配？

对ES6模块有些陌生，我发现自己在以下两种模式之间左右为难

模式#1-导入时分解结构

import { func1, func2, func3 } from 'my-funcs';

模式#2-在

const

import * as myFuncs from 'my-funcs'; 
const { func1, func2, func3 } = myFuncs;

我喜欢模式1的简洁性，但我也喜欢模式2，因为它看起来更明确

---

是否有充分的理由使用一个而不是另一个？

在ES6中，导入绑定到变量（与值相反）。这意味着，如果导出模块更改其导出的变量，则更新后的值将反映在导入该变量的所有模块中

例如，假设我们有一个模块，它导出一个原语值，然后在一段未指定的时间后对其进行更改

myVar.js

export var myVar = "1";
setTimeout(() => {myVar = "2"}, 2000);

假设您是这样导入的：

main1.js

import { myVar } from './myVar.js';
console.log(myVar);
setTimeout(() => { console.log(myVar); }, 3000);

产出将是：

1
2

1
1

但是，如果在导入变量时立即将原始值指定给该变量，则该值将保持不变

main2.js

import * as MyVar from './myVar.js';
const myVar = MyVar.myVar;
console.log(myVar);
setTimeout(() => { console.log(myVar); }, 3000);

该程序的输出为：

1
2

1
1

---

这种差异可能是您需要记住的。

第一个差异不是解构，而是将命名导出导入到模块范围中。第二个函数以名称

myFuncs

导入模块名称空间对象，然后对其进行分解

主要区别在于，在第二种模式中，您得到的是常量，而不是对导出绑定的直接引用（这可能会改变）。这一点很重要，例如对于循环依赖关系

一个微小的区别是附加的标识符

myFuncs

，这是非常无用的。但是，它确实允许您访问模块的所有导出，这对于树震动很重要-如果您只显式导入模块的一部分，绑定器可能会产生较小的结果

是否有充分的理由使用其中一个而不是另一个

---

绝对-第一种模式更简单、更短，在边缘情况下工作正常，可以更好地优化。

使用模式1将从优化中受益，而模式2将不会感谢@RobM。！我想知道这种优化是否存在（当然也存在）。正是我一直在寻找的信息。：）极好的信息！你让我倾向于模式1…似乎模式2可能会导致意想不到的结果。谢谢@Bergi。您能否解释不直接引用导出的绑定如何与循环依赖项相关？对于循环依赖项，您要导入的模块可能尚未进行评估。如果以后使用导入（例如，在其他地方调用的函数中），这不是问题，当您执行

const{func1，func2，func3}=myFuncs时，这是问题而
myFuncs
尚未包含值。