Motivation

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

Concept

在 Vue（以及整個 JavaScript 生態(tài)）中，export 關鍵字的意思是 “導出”。

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

在 Vue 3 開發(fā)中，我們主要會遇到兩種導出方式：具名導出和默認導出。

1. 默認導出 (Export Default)

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

• 案例說明： > 場景： 你寫了一個名為 PostView.vue 的發(fā)帖頁面。

代碼：

export default {
  name: 'PostPage'
}

特點： 一個文件只能有一個 export default。就像一個家只能有一個“大門”。
導入時： 你可以隨便給它起名字。import MyPostPage from './PostView.vue'。

2. 具名導出 (Named Export)

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

• 案例說明：

場景： 你寫了一個 format.js，專門用來處理論壇的時間顯示。
代碼：

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

特點： 一個文件可以有無數(shù)個具名導出。
導入時： 必須帶上花括號，且名字要對上。import { formatTime } from './format.js'。

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

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

<script setup>
// 這里沒有任何 export 關鍵字
</script>

• 背后的原理： 這是 Vue 3 的語法糖。當你使用 <script setup> 時，Vite 和 Vue 編譯器會自動幫你把這個組件 “默認導出”。
• 編譯器的工作： 它在后臺默默地幫你補齊了代碼，效果等同于 export default { ... }。這正是 Vue 3 讓代碼變簡潔的高明之處。

4. 總結對比：export與import

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

為什么要用它？

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

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

VUE3中的steup語法糖與export

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

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

• 在 Vue 2（或 Vue 3 的傳統(tǒng)寫法）中：
  你必須寫 export default { ... }，明確地告訴系統(tǒng)：“我要把這個組件對象導出去”。
• 在 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：全局數(shù)據(jù)倉庫 (Pinia)

你要讓全站都能訪問“用戶信息”，你必須手動導出它。

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

場景 B：公共函數(shù)庫

如果你寫了一個專門處理“論壇日期格式化”的函數(shù)，你也需要導出它。

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

2. 深度對比：Vue 2 vs Vue 3 導出邏輯

3. 總結：什么時候該寫export？

作為新手，要記住這條簡單的準則：

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

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

最新評論