我什么时候使用 {}，什么时候不在 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'

谢谢

【问题讨论】：

标签： javascript vue.js import

【解决方案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 的一个特性。

【讨论】：