export default 在 vue 中是导出模块的主要方式，它简化了组件导出和导入，其中一个模块只能有一个 export default，这使得代码更简洁。它通常用于导出单文件组件，但也有局限性，例如无法导出多个内容。
Vue 中 export default 和 ES 模块：比你想象的更亲密
你可能在无数 Vue 项目中见过 export default，却对它和 ES 模块的关系感到模糊。这篇文章会带你深入挖掘，让你不再对它们感到困惑。 读完后，你会明白 export default 的本质，以及它如何优雅地与 ES 模块机制协作，从而构建出更清晰、更易维护的 Vue 应用。
咱们先从 ES 模块说起。ES 模块是 JavaScript 的标准模块系统，它提供了一种在不同 JavaScript 文件之间共享代码的方式。 核心在于 import 和 export 关键字。export 用于导出模块中的变量、函数或类，让其他模块可以访问；import 则用于导入其他模块导出的内容。
现在，让我们聚焦 export default。它其实是一种特殊的导出方式，一个模块只能有一个 export default。 它不像命名导出 (export const foo = ...) 那样需要指定名称，你导入时可以赋予它任何你喜欢的名字。 这在 Vue 单文件组件 (.vue) 中非常常见，因为一个组件通常只有一个默认导出，代表着这个组件本身。
来看个例子，一个简单的 Vue 组件：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">// MyComponent.vue
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello from MyComponent!'
};
},
template: `<div>{{ message }}</div>`
};</code>在这个例子中，整个组件对象都被 export default 导出。 在另一个组件中，你可以这样导入它：
<code class="javascript">// AnotherComponent.vue
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
// ... rest of the component
};</code>这里，MyComponent 可以是任意合法的变量名。 这正是 export default 的便捷之处，它简化了导入过程，使代码更简洁。
但 export default 也并非完美无缺。 它的一个局限性在于，一个模块只能有一个 export default。 如果你需要导出多个内容，就必须使用命名导出。 这在某些情况下可能会限制灵活性。 另外，使用 export default 会让代码的意图略微不那么清晰，特别是当项目规模较大时，追踪 export default 的具体内容可能需要更多的时间。 相比之下，命名导出更具有可读性和可维护性。
再深入一点，让我们看看 Vue 内部是如何处理 export default 的。 Vue 的编译器会识别 export default 并将其作为组件的根对象。 这个对象包含了组件的各种属性，例如 data、methods、template 等。 Vue 框架会根据这个对象来创建和渲染组件实例。
总结一下，export default 在 Vue 中扮演着关键角色，它简化了组件的导出和导入，使代码更易于阅读和维护，尤其在单文件组件的场景下。 但它也存在一定的局限性，需要根据实际情况选择合适的导出方式。 如果你需要导出多个内容，或者追求更高的代码清晰度，那么命名导出会是一个更好的选择。 熟练掌握这两种导出方式，才能写出更优雅、更高效的 Vue 代码。 记住，选择适合你项目需求的方案才是最重要的。 不要盲目追求所谓的“最佳实践”，而要理解其背后的原理和权衡。
