Vue中export default和ES模块有什么关系

export default 在 Vue 中是导出模块的主要方式，它简化了组件导出和导入，其中一个模块只能有一个 export default，这使得代码更简洁。它通常用于导出单文件组件，但也有局限性，例如无法导出多个内容。

(图1)

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 组件：

立即学习“前端免费学习笔记（深入）”；

// MyComponent.vue
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  },
  template: `{{ message }}`
};