Question

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

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

谢谢

Answer 1

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

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

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

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

Answer 2

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

Answer 3

在我看来，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/

<块引用>

结论

<块引用>

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

我什么时候使用 {}，什么时候不使用 JavaScript 导入

3 个答案: