Vue的import什么时候用大括号

在Vue.js（以及更广泛的JavaScript ES6模块系统中）中，使用大括号{}进行import操作的场景通常是在你想要从模块中导入具体的导出项时。这种导入方式被称为“命名导入”（Named Imports）。

命名导入（Named Imports）

当你使用命名导入时，你需要知道模块中导出的具体变量名、函数名、类名等，并在大括号中指定它们。这种方式允许你从模块中导入多个特定的导出项。

示例：

假设有一个名为utils.js的文件，它导出了两个函数：

// utils.js  
export function sum(a, b) {  
  return a + b;  
}  
  
export function multiply(a, b) {  
  return a * b;  
}

你可以在另一个文件中使用大括号来导入这两个特定的函数：

// App.vue 或其他任何.js文件  
import { sum, multiply } from './utils';  
  
console.log(sum(2, 3)); // 输出: 5  
console.log(multiply(2, 3)); // 输出: 6

默认导入（Default Imports）

与命名导入相对的是默认导入（Default Imports），这种情况下不使用大括号。默认导入用于导入模块中默认导出的项（通常是一个值、函数、类等）。如果一个模块只有一个主要的导出项，通常会使用默认导出。

示例：

修改utils.js以使用默认导出：

// utils.js  
function sum(a, b) {  
  return a + b;  
}  
  
export default sum; // 现在sum是默认导出的

然后在另一个文件中使用默认导入：

// App.vue 或其他任何.js文件  
import sum from './utils'; // 注意这里没有使用大括号  
  
console.log(sum(2, 3)); // 输出: 5

总结

• 使用大括号{}进行import时，你是在进行命名导入，这允许你从模块中导入特定的导出项。
• 如果模块有一个默认的导出项，你可以不使用大括号直接导入它。
• 在Vue.js项目中，这两种导入方式都非常常见，具体使用哪种取决于模块的导出方式以及你的具体需求。