Motivation

經(jīng)常在js的代碼中看到export關(guān)鍵字，但是不懂這個(gè)關(guān)鍵字是什么意思，借助LLM整理了一下對(duì)這個(gè)概念的理解，這里作為筆記記錄一下。

Concept

在 Vue（以及整個(gè) JavaScript 生態(tài)）中，export 關(guān)鍵字的意思是 “導(dǎo)出”。

如果把一個(gè) .js 或 .vue 文件比作一個(gè)獨(dú)立的房間，那么默認(rèn)情況下，房間里的變量、函數(shù)或組件都是被“鎖”在里面的，外面的人看不見(jiàn)也用不了。export 關(guān)鍵字就像是給這個(gè)房間開(kāi)了一扇窗或一扇門(mén)，允許其他文件訪(fǎng)問(wèn)這些內(nèi)容。

在 Vue 3 開(kāi)發(fā)中，我們主要會(huì)遇到兩種導(dǎo)出方式：具名導(dǎo)出和默認(rèn)導(dǎo)出。

1. 默認(rèn)導(dǎo)出 (Export Default)

這是你在 Vue 組件（.vue 文件）中見(jiàn)得最多的方式。它表示：“如果你引用這個(gè)文件，我默認(rèn)就給你這個(gè)東西”。

• 案例說(shuō)明： > 場(chǎng)景： 你寫(xiě)了一個(gè)名為 PostView.vue 的發(fā)帖頁(yè)面。

代碼：

export default {
  name: 'PostPage'
}

特點(diǎn)： 一個(gè)文件只能有一個(gè) export default。就像一個(gè)家只能有一個(gè)“大門(mén)”。
導(dǎo)入時(shí)： 你可以隨便給它起名字。import MyPostPage from './PostView.vue'。

2. 具名導(dǎo)出 (Named Export)

當(dāng)你想要在一個(gè)文件里導(dǎo)出多個(gè)東西（比如一堆工具函數(shù)）時(shí)，就需要給它們起名字。

• 案例說(shuō)明：

場(chǎng)景： 你寫(xiě)了一個(gè) format.js，專(zhuān)門(mén)用來(lái)處理論壇的時(shí)間顯示。
代碼：

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

特點(diǎn)： 一個(gè)文件可以有無(wú)數(shù)個(gè)具名導(dǎo)出。
導(dǎo)入時(shí)： 必須帶上花括號(hào)，且名字要對(duì)上。import { formatTime } from './format.js'。

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

你可能會(huì)發(fā)現(xiàn)，在我們之前寫(xiě)的 PostView.vue 里，根本沒(méi)有寫(xiě) export 關(guān)鍵字，但路由依然能引用它。這是為什么？

<script setup>
// 這里沒(méi)有任何 export 關(guān)鍵字
</script>

• 背后的原理： 這是 Vue 3 的語(yǔ)法糖。當(dāng)你使用 <script setup> 時(shí)，Vite 和 Vue 編譯器會(huì)自動(dòng)幫你把這個(gè)組件 “默認(rèn)導(dǎo)出”。
• 編譯器的工作： 它在后臺(tái)默默地幫你補(bǔ)齊了代碼，效果等同于 export default { ... }。這正是 Vue 3 讓代碼變簡(jiǎn)潔的高明之處。

4. 總結(jié)對(duì)比：export與import

它們是成對(duì)出現(xiàn)的“進(jìn)出口貿(mào)易”：

為什么要用它？

如果沒(méi)有 export，你的整個(gè)論壇項(xiàng)目就必須寫(xiě)在一個(gè)巨大的 .html 文件里（就像幾萬(wàn)行代碼擠在一起）。有了 export，你才能實(shí)現(xiàn)：

1. 模塊化： 把首頁(yè)、發(fā)帖頁(yè)、個(gè)人中心拆成不同的文件。
2. 復(fù)用性： 寫(xiě)一個(gè)漂亮的按鈕組件，通過(guò) export 導(dǎo)出后，在全站任何地方都能 import 使用。

VUE3中的steup語(yǔ)法糖與export

這里這個(gè)概念需要著重提一下：上面兩種寫(xiě)法并不是 Vue 2 和 Vue 3 的區(qū)別，而是**“傳統(tǒng)寫(xiě)法”**與 “Vue 3 語(yǔ)法糖（<script setup>）” 的區(qū)別。

在 Vue 3 中，如果你使用全新的 <script setup> 模式，Vue 的編譯器確實(shí)在后臺(tái)幫你做了很多“體力活”。

• 在 Vue 2（或 Vue 3 的傳統(tǒng)寫(xiě)法）中：
  你必須寫(xiě) export default { ... }，明確地告訴系統(tǒng)：“我要把這個(gè)組件對(duì)象導(dǎo)出去”。
• 在 Vue 3 <script setup> 中：
  你不需要寫(xiě) export default。因?yàn)榫幾g器知道，既然你寫(xiě)了這個(gè) .vue 文件，你肯定是要用它的。它會(huì)自動(dòng)幫你把整個(gè)組件包裝成一個(gè)默認(rèn)導(dǎo)出。

案例說(shuō)明：
場(chǎng)景： 你寫(xiě)了一個(gè)名為 ForumCard.vue 的小卡片組件。
Vue 3 代碼：

<script setup>
const title = "我是帖子標(biāo)題"
// 注意：這里不需要寫(xiě) export，外面也能用這個(gè)組件
</script>

真相： 雖然你沒(méi)寫(xiě)，但 Vite 在處理這個(gè)文件時(shí)，會(huì)自動(dòng)把它翻譯成一個(gè)帶有 export default 的 JavaScript 模塊。

1. 依然需要顯式export的場(chǎng)景

雖然組件本身不需要你手動(dòng)導(dǎo)出了，但在 Vue 3 的某些地方，你依然需要用到 export。最典型的就是比如 Pinia（倉(cāng)庫(kù)） 或 工具類(lèi)文件。

場(chǎng)景 A：全局?jǐn)?shù)據(jù)倉(cāng)庫(kù) (Pinia)

你要讓全站都能訪(fǎng)問(wèn)“用戶(hù)信息”，你必須手動(dòng)導(dǎo)出它。

// src/stores/user.js
import { defineStore } from 'pinia'
// 你必須寫(xiě)這個(gè) export，否則 main.js 和其他頁(yè)面找不到這個(gè)倉(cāng)庫(kù)
export const useUserStore = defineStore('user', {
  state: () => ({ name: '新手小萌' })
})

場(chǎng)景 B：公共函數(shù)庫(kù)

如果你寫(xiě)了一個(gè)專(zhuān)門(mén)處理“論壇日期格式化”的函數(shù)，你也需要導(dǎo)出它。

// src/utils/time.js
// 必須導(dǎo)出，其他頁(yè)面才能 import 它
export function formatDate(date) { ... }

2. 深度對(duì)比：Vue 2 vs Vue 3 導(dǎo)出邏輯

3. 總結(jié)：什么時(shí)候該寫(xiě)export？

作為新手，要記住這條簡(jiǎn)單的準(zhǔn)則：

1. 如果你是在寫(xiě) .vue 文件： 只要用了 <script setup>，你就不需要寫(xiě) export 導(dǎo)出組件自己。
2. 如果你是在寫(xiě) .js 文件：（比如路由配置、數(shù)據(jù)倉(cāng)庫(kù)、工具函數(shù)），你依然需要寫(xiě) export，否則其他文件找不到它們。

到此這篇關(guān)于JS中的export關(guān)鍵字的文章就介紹到這了,更多相關(guān)JS中的export關(guān)鍵字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論