JavaScript import语句何时使用花括号？Vue JS开发疑问

这两种写法本质是ES Module规范定义的两类导入规则，和Vue本身没有强绑定，只是日常开发中的高频使用场景刚好落在Vue生态内，核心区别如下：

• 不带花括号的导入：默认导入（Default Import）
  这类导入匹配模块中通过 export default 语法抛出的内容。一个模块仅能存在1个默认导出，因此导入时不需要严格和原导出的命名保持一致，可以自由给导入的内容起别名。
  对应示例中的 import Home from '@/views/Home.vue'：Vue 单文件组件的编译规则会自动把组件配置对象作为默认导出抛出，所以导入时不需要加花括号，哪怕把变量名改成 import PageHome from '@/views/Home.vue' 也能正常拿到组件。
• 带花括号的导入：命名导入（Named Import）
  这类导入匹配模块中通过单独的 export 语法（不带default）抛出的具名内容。一个模块可以存在任意多个命名导出，导入时必须和原导出的命名完全一致，否则会拿到undefined值。
  对应示例中的 import { createRouter, createWebHistory } from 'vue-router'：vue-router 模块内部没有把这两个方法作为默认导出，而是作为独立的具名方法挂载在模块导出列表中，因此必须用花括号包裹才能取到对应方法，如果改成 import { newRouter, browserHistory } from 'vue-router' 就会触发取值错误。

补充常见混写场景：部分模块会同时提供默认导出和多个命名导出，此时可以混合两种写法，比如 import util, { fetchData, formatDate } from './common.js'，其中不带花括号的部分匹配默认导出，带花括号的部分匹配具名导出。

内容的提问来源于stack exchange，提问作者Norris