vue中export和export default的使用

**Vue 中 export 和 export default 的使用**

在 Vue.js 中，`export` 和 `export default` 是两个常用的关键字，用来导出模块或组件。虽然它们看起来很相似，但实际上有着不同的用途和行为。

###1. export`export` 用于导出一个模块或变量，使其可以在其他文件中使用。它的基本语法是 `export { 变量名 }` 或 `export function 函数名() {}`。

**示例代码**

javascript// myModule.jsconst PI =3.14;
function add(a, b) {
 return a + b;
}

export { PI, add };

javascript// main.jsimport { PI, add } from './myModule';
console.log(PI); // 输出:3.14console.log(add(2,3)); // 输出:5

在这个例子中，我们导出了一个变量 `PI` 和一个函数 `add`，使它们可以在其他文件中使用。

###2. export default`export default` 用于导出一个模块或组件的默认值。它的基本语法是 `export default 变量名` 或 `export default function 函数名() {}`。

**示例代码**

javascript// myModule.jsconst PI =3.14;
function add(a, b) {
 return a + b;
}

export default { PI, add };

javascript// main.jsimport myModule from './myModule';
console.log(myModule.PI); // 输出:3.14console.log(myModule.add(2,3)); // 输出:5

在这个例子中，我们导出了一个对象 `{ PI, add }` 作为默认值，使得 `PI` 和 `add` 可以通过 `myModule.PI` 和 `myModule.add()` 的方式访问。

###3. export default vs export虽然 `export default` 和 `export` 都可以用于导出模块或变量，但它们有着不同的用途和行为：

* `export` 用于导出一个具体的值或函数，而不一定是默认值。
* `export default` 用于导出一个模块或组件的默认值。

**示例代码**

javascript// myModule.jsconst PI =3.14;
function add(a, b) {
 return a + b;
}

export { PI as piValue };
export default { PI, add };

在这个例子中，我们导出了一个变量 `PI` 作为 `piValue`，同时导出了一个对象 `{ PI, add }` 作为默认值。

###4. export 和 import 的使用在 Vue.js 中，`export` 和 `import` 是两个相互关联的关键字。`export` 用于导出模块或变量，而 `import` 用于从其他文件中导入这些模块或变量。

**示例代码**

javascript// myModule.jsconst PI =3.14;
function add(a, b) {
 return a + b;
}

export { PI, add };

javascript// main.jsimport { PI, add } from './myModule';
console.log(PI); // 输出:3.14console.log(add(2,3)); // 输出:5

在这个例子中，我们导出了一个变量 `PI` 和一个函数 `add`，然后从其他文件中导入它们。

###5. export 和 import 的最佳实践虽然 `export` 和 `import` 是两个非常有用的关键字，但也有一些最佳实践需要遵循：

* **使用 export default**: 当导出一个模块或组件的默认值时，应使用 `export default`。
* **避免重复导出**: 避免在同一个文件中多次导出相同的变量或函数。
* **使用 import 的 alias**: 使用 `import` 的 alias 可以使代码更易读和维护。

通过遵循这些最佳实践，开发者可以编写更加高效、易于维护的 Vue.js项目。