JS中的export关键字

Motivation

经常在js的代码中看到export关键字，但是不懂这个关键字是什么意思，借助LLM整理了一下对这个概念的理解，这里作为笔记记录一下。

Concept

在 Vue（以及整个 JavaScript 生态）中，export 关键字的意思是 "导出"。

如果把一个 .js 或 .vue 文件比作一个独立的房间 ，那么默认情况下，房间里的变量、函数或组件都是被"锁"在里面的，外面的人看不见也用不了。export 关键字就像是给这个房间开了一扇窗或一扇门，允许其他文件访问这些内容。

在 Vue 3 开发中，我们主要会遇到两种导出方式：具名导出 和默认导出。

1. 默认导出 (Export Default)

这是你在 Vue 组件（.vue 文件）中见得最多的方式。它表示："如果你引用这个文件，我默认就给你这个东西"。

案例说明： > 场景： 你写了一个名为 PostView.vue 的发帖页面。

代码：
javascript 复制代码
export default {
  name: 'PostPage'
}
特点： 一个文件只能有一个 export default。就像一个家只能有一个"大门"。
导入时： 你可以随便给它起名字。import MyPostPage from './PostView.vue'。

2. 具名导出 (Named Export)

当你想要在一个文件里导出多个东西（比如一堆工具函数）时，就需要给它们起名字。

案例说明：

场景： 你写了一个 format.js，专门用来处理论坛的时间显示。
代码：
javascript 复制代码
export const formatTime = (time) => { ... }
export const formatUserName = (name) => { ... }
特点： 一个文件可以有无数个具名导出。
导入时： 必须带上花括号，且名字要对上。import { formatTime } from './format.js'。

3. 在 Vue 3 `<script setup>` 中的特殊情况

你可能会发现，在我们之前写的 PostView.vue 里，根本没有写 export 关键字，但路由依然能引用它。这是为什么？

vue 复制代码

<script setup>
// 这里没有任何 export 关键字
</script>

背后的原理： 这是 Vue 3 的语法糖 。当你使用 <script setup> 时，Vite 和 Vue 编译器会自动帮你把这个组件 "默认导出"。
编译器的工作： 它在后台默默地帮你补齐了代码，效果等同于 export default { ... }。这正是 Vue 3 让代码变简洁的高明之处。

4. 总结对比：`export` 与 `import`

它们是成对出现的"进出口贸易"：

动作	关键字	类比
提供方	`export`	仓库发货，把东西摆上货架。
使用方	`import`	商店进货，把东西买回来用。

为什么要用它？

如果没有 export，你的整个论坛项目就必须写在一个巨大的 .html 文件里（就像几万行代码挤在一起）。有了 export，你才能实现：

模块化： 把首页、发帖页、个人中心拆成不同的文件。
复用性： 写一个漂亮的按钮组件，通过 export 导出后，在全站任何地方都能 import 使用。

VUE3中的steup语法糖与export

这里这个概念需要着重提一下：上面两种写法并不是 Vue 2 和 Vue 3 的区别，而是**"传统写法"**与 "Vue 3 语法糖（<script setup>）" 的区别。

在 Vue 3 中，如果你使用全新的 <script setup> 模式，Vue 的编译器确实在后台帮你做了很多"体力活"。

在 Vue 2（或 Vue 3 的传统写法）中：
你必须写 export default { ... }，明确地告诉系统："我要把这个组件对象导出去"。
在 Vue 3 <script setup> 中：
你不需要 写 export default。因为编译器知道，既然你写了这个 .vue 文件，你肯定是要用它的。它会自动帮你把整个组件包装成一个默认导出。

案例说明：
场景： 你写了一个名为 ForumCard.vue 的小卡片组件。
Vue 3 代码：
vue 复制代码
<script setup>
const title = "我是帖子标题"
// 注意：这里不需要写 export，外面也能用这个组件
</script>
真相： 虽然你没写，但 Vite 在处理这个文件时，会自动把它翻译成一个带有 export default 的 JavaScript 模块。

2. 依然需要显式 `export` 的场景

虽然组件本身 不需要你手动导出了，但在 Vue 3 的某些地方，你依然需要用到 export。最典型的就是比如 Pinia（仓库） 或 工具类文件。

场景 A：全局数据仓库 (Pinia)

你要让全站都能访问"用户信息"，你必须手动导出它。

javascript 复制代码

// src/stores/user.js
import { defineStore } from 'pinia'

// 你必须写这个 export，否则 main.js 和其他页面找不到这个仓库
export const useUserStore = defineStore('user', {
  state: () => ({ name: '新手小萌' })
})

场景 B：公共函数库

如果你写了一个专门处理"论坛日期格式化"的函数，你也需要导出它。

javascript 复制代码

// src/utils/time.js
// 必须导出，其他页面才能 import 它
export function formatDate(date) { ... }

3. 深度对比：Vue 2 vs Vue 3 导出逻辑

特性	Vue 2 (Options API)	Vue 3 (<script setup>)
组件对象导出	必须显式写 `export default`	自动完成，不需要写
变量/函数导出	在 `data` 或 `methods` 中返回	自动暴露给模板使用，但导出给外部仍需 `export`
外部 JS 文件	必须写 `export`	必须写 `export`

4. 总结：什么时候该写 `export`？

作为新手，要记住这条简单的准则：

如果你是在写 .vue 文件： 只要用了 <script setup>，你就不需要 写 export 导出组件自己。
如果你是在写 .js 文件： （比如路由配置、数据仓库、工具函数），你依然需要 写 export，否则其他文件找不到它们。