我啥时候使用 ，啥时候不在 JavaScript 中导入 [重复]

Posted 2023-02-22

【中文标题】我啥时候使用 ，啥时候不在 JavaScript 中导入 [重复]

【英文标题】：When do I use and when do I not in import in JavaScript [duplicate]我什么时候使用 ，什么时候不在 JavaScript 中导入 [重复]

【发布时间】：2021-06-17 13:37:36

【问题描述】：

我正在学习 Vue JS，发现有时我们导入 有时我们在没有 的情况下导入。请问有什么区别？

import Home from '@/views/Home.vue'
import  createRouter, createWebHistory  from 'vue-router'

谢谢

【参考方案1】：

在我看来，javascript 导入的方式令人困惑，并且是编程错误的常见来源。

问题在于没有关于默认导出与命名导出的规则，也没有因导入错误而导致的错误。

例如，

import moment from 'moment' // The _right_ way to import it

const now = moment()

与这段看起来非常相似的代码进行比较，只有导入时的大括号不同：

import  moment  from 'moment' // The _wrong_ way to import it, 
                                // but it doesn't throw an error (until you try and use it)

const now = moment() // Will throw an error, because moment is undefined

这里有一篇关于这个主题的好文章：https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

结论

我在导入默认值时遇到了几个生产力问题 在我的项目中导出。虽然没有一个问题是必然的 不可能克服，使用命名的导入和导出似乎 编码时更符合我的喜好。使事情明确和 严重依赖工具使我成为一名高效的编码人员，并且只要 命名出口帮助我做到这一点，我可能会支持他们 可预见的未来。当然，我无法控制第三方如何 我使用的模块导出它们的功能，但我肯定有一个 选择我自己的模块如何导出内容并将选择命名 出口。

【参考方案2】：

如果您想要包的所有或更多功能（组件），您可以使用import Home from '@/views/Home.vue'， 如果您想要包中的特定功能（组件），您可以使用import createRouter, createWebHistory from 'vue-router'

【参考方案3】：

带 的导入称为命名导入，不带 的导入称为默认导入。

当您将组件导出为 export Component_Name 时，您将其导入为 import Component_Name from 'path_to_component'；

当您将组件导出为export default Component_Name 时，您将其导入为import Component_Name from 'path_to_component'；

这不是 vue 特定的，它只是 ES6 版本的 Javascript 的一个特性。