JS中的export关键字使用场景

Motivation

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

Concept

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

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

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

1. 默认导出 (Export Default)

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

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

代码：

export default {
  name: 'PostPage'
}

特点： 一个文件只能有一个 export default。就像一个家只能有一个“大门”。
导入时： 你可以随便给它起名字。import MyPostPage from './PostView.vue'。

2. 具名导出 (Named Export)

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

• 案例说明：

场景： 你写了一个 format.js，专门用来处理论坛的时间显示。
代码：

export const formatTime = (time) => { ... }
export const formatUserName = (name) => { ... }

特点： 一个文件可以有无数个具名导出。
导入时： 必须带上花括号，且名字要对上。import { formatTime } from './format.js'。

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

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

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

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

4. 总结对比：export与import

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

为什么要用它？

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

1. 模块化： 把首页、发帖页、个人中心拆成不同的文件。
2. 复用性： 写一个漂亮的按钮组件，通过 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 代码：

<script setup>
const title = "我是帖子标题"
// 注意：这里不需要写 export，外面也能用这个组件
</script>

真相： 虽然你没写，但 Vite 在处理这个文件时，会自动把它翻译成一个带有 export default 的 JavaScript 模块。

1. 依然需要显式export的场景

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

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

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

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

场景 B：公共函数库

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

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

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

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

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

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

到此这篇关于JS中的export关键字的文章就介绍到这了,更多相关JS中的export关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论