关于导入的知识

在Vue或者任何使用ES6模块导入（import）语法的JavaScript项目中，大括号的使用与否取决于导入的成员类型。主要有两种导入方式：默认导入（Default Imports）和命名导入（Named Imports）。

默认导入（Default Import）：默认导入是指模块导出时使用export default语法导出的成员。默认导出每个模块只能有一个，而且导入时不使用大括号。例如，如果一个模块使用export default导出了一个函数或一个对象，那么在导入这个默认导出的成员时，你可以给它起任何名字，并且不需要大括号。
```
// 假设有个模块defaultExport.js
export default function() { ... }

// 导入时
import anyName from './defaultExport.js';
```
这里的anyName可以是任何有效的变量名，它会被赋予defaultExport.js模块默认导出的成员。
命名导入（Named Imports）：命名导入用于导入模块中通过export（而非export default）导出的成员。模块可以导出多个命名成员，导入时需要使用大括号{}来指定想要导入的成员名。这要求导入时的名称与模块内部导出的名称完全匹配。
```
// 假设有个模块namedExports.js
export const name1 = ...;
export function name2() { ... }

// 导入时
import { name1, name2 } from './namedExports.js';
```
在这个例子中，name1和name2必须与namedExports.js中导出的名称完全相同。

总结：当你看到导入语句使用大括号时，它表示这是一个或多个命名导入的情形，必须与导出时的名称完全匹配。如果没有大括号，那么它是一个默认导入，表示导入的是模块的默认导出成员，可以自由命名。在Vue3中，如ref和onMounted等都是Vue提供的API，需要通过命名导入的方式从vue包中导入，因为它们是作为命名导出提供的。

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)