[Vue]JavaScript中的默认导出和命名导出

import axios from 'axios'
import {
   ref} from 'vue'

在 JavaScript 中，import 语句的语法有两种不同的用法，这取决于你导入的是一个 默认导出 还是 命名导出。我们来详细解释为什么 import axios from 'axios' 不需要加 {}，而 import { ref } from 'vue' 需要加 {}。

1. 默认导出 (default export) 和命名导出 (named export) 区别

默认导出（default export）

当一个模块有一个默认导出时，我们可以使用 import 来直接导入该默认导出的对象、函数或类。默认导出允许我们指定任何名称来引用导入的内容。

示例：
假设我们在 axios 库内部使用了默认导出：

// axios.js (假设为 axios 库内部的实现)
export default axiosInstance;

当我们使用 import axios from 'axios' 时，axios 就会对应该模块的默认导出。注意，这里的 axios 可以是任何名称，只要它是默认导出的内容。

import axios from 'axios';  // axios 是默认导出的名称

在这里，axios 是导入的默认对象或函数，因此我们可以直接通过 axios 访问它，而不需要使用 {}。

命名导出（named export）

命名导出允许一个模块导出多个独立的部分，并且每个部分都有一个名称。当我们导入时，必须使用 {} 来指定要导入的具体部分。

示例：
假设在 vue 中使用了命名导出：

// vue.js (假设为 vue 库内部的实现)
export {
    ref, reactive, onMounted };

在这种情况下，vue 模块有多个命名导出（如 ref、reactive 和 onMounted）。为了导入其中的某个部分，我们必须使用 {} 来指定要导入的名称。

import {
    ref } from 'vue';  // 这里我们导入了 ref 这个命名导出

2. 解释为什么 import axios from 'axios' 不用加 {}

在 axios 中，库作者采用了 默认导出 的方式，也就是说，axios 是通过 export default 进行导出的，因此我们在导入时只需要使用默认导入语法：

import axios from 'axios';

• axios 是该库的默认导出。
• 我们可以为它起一个任意的名字（这里是 axios）来引用它，而不需要使用 {}。

3. 解释为什么 import { ref } from 'vue' 需要加 {}

在 vue 中，ref 是通过 命名导出 的方式进行导出的：

export {
    ref, reactive, onMounted };  // 多个命名导出

• 因为 ref 作为命名导出存在，所以我们必须使用 {} 来导入它。
• import { ref } from 'vue' 表示从 vue 模块中只导入 ref 这一部分，并将其赋值给 ref 变量。

总结：

• 默认导出：导入时不需要使用 {}，直接指定你想要的名字即可。例如：import axios from 'axios';