我什么时候使用{}以及什么时候不在JavaScript中导入[duplicate]

Question

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

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

非常感谢。

Answer 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/

结论

在我的项目中导入默认导出时，我遇到了几个生产率问题。虽然这些问题都不一定是不可能克服的，但在编码时，使用命名的导入和导出似乎更适合我的偏好。让事情变得清晰并严重依赖工具使我成为一个高效的程序员，只要命名出口帮助我做到这一点，在可预见的未来，我可能会喜欢它们。当然，我无法控制如何使用第三方模块导出其功能，但我绝对可以选择自己的模块如何导出东西，并将选择命名导出。

Answer 2

如果您想要包的全部或多个功能（组件），可以使用从'@/views/Home.vue'导入Home>，如果您想要包中的特定功能（组件），可以使用从'vue router'导入{createRouter，createWebHistory}

Answer 3

有{}的导入称为命名导入，没有{}的导入称为默认导入。

当您将组件导出为导出时Component_Name您将其从path_to_component导入为导入{Component_Name}；

当您将组件导出为导出默认组件\u名称时，您将其导入为将组件\u名称从“路径\u导入到\u组件”；

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