單文件組件

Vue 的單文件組件 (即 *.vue 文件，英文 Single-File Component，簡稱 SFC) 是一(yī)種特殊的文件格式，使我們能(néng)夠将一(yī)個 Vue 組件的模闆、邏輯與樣式封裝在單個文件中。下(xià)面是一(yī)個單文件組件的示例：

vue

<script>

export default {

data() {

return {

greeting: 'Hello World!'

}

}

}

</script>

<template>

<p class="greeting">{{ greeting }}</p>

</template>

<style>

.greeting {

color: red;

font-weight: bold;

}

</style>

如(rú)你所見(jiàn)，Vue 的單文件組件是網頁開(kāi)發中 HTML、CSS 和(hé) JavaScript 三種語言經典組合的自(zì)然延伸。<template>、<script> 和(hé) <style> 三個塊在同一(yī)個文件中封裝、組合了(le)組件的視(shì)圖、邏輯和(hé)樣式。完整的語法定義可(kě)以查閱 SFC 語法說明(míng)。

為(wèi)什麽要(yào)使用 SFC ​

使用 SFC 必須使用構建工(gōng)具，但(dàn)作(zuò)為(wèi)回報帶來了(le)以下(xià)優點：

使用熟悉的 HTML、CSS 和(hé) JavaScript 語法編寫模塊化的組件

讓本來就強相關的關注點自(zì)然內(nèi)聚

預編譯模闆，避免運行(xíng)時(shí)的編譯開(kāi)銷

組件作(zuò)用域的 CSS

在使用組合式 API 時(shí)語法更簡單

通(tōng)過交叉分析模闆和(hé)邏輯代碼能(néng)進行(xíng)更多編譯時(shí)優化

更好的 IDE 支持，提供自(zì)動補全和(hé)對模闆中表達式的類型檢查

開(kāi)箱即用的模塊熱(rè)更新 (HMR) 支持

SFC 是 Vue 框架提供的一(yī)個功能(néng)，并且在下(xià)列場景中都(dōu)是官方推薦的項目組織方式：

單頁面應用 (SPA)

靜态站點生成 (SSG)

任何值得引入構建步驟以獲得更好的開(kāi)發體驗 (DX) 的項目

當然，在一(yī)些輕量級場景下(xià)使用 SFC 會顯得有些殺雞用牛刀。因此 Vue 同樣也可(kě)以在無構建步驟的情況下(xià)以純 JavaScript 方式使用。如(rú)果你的用例隻需要(yào)給靜态 HTML 添加一(yī)些簡單的交互，你可(kě)以看(kàn)看(kàn) petite-vue，它是一(yī)個 6 kB 左右、預優化過的 Vue 子集，更适合漸進式增強的需求。

SFC 是如(rú)何工(gōng)作(zuò)的 ​

Vue SFC 是一(yī)個框架指定的文件格式，因此必須交由 @vue/compiler-sfc 編譯為(wèi)标準的 JavaScript 和(hé) CSS，一(yī)個編譯後的 SFC 是一(yī)個标準的 JavaScript(ES) 模塊，這(zhè)也意味着在構建配置正确的前提下(xià)，你可(kě)以像導入其他(tā) ES 模塊一(yī)樣導入 SFC：

js

import MyComponent from './MyComponent.vue'

export default {

components: {

MyComponent

}

}

SFC 中的 <style> 标簽一(yī)般會在開(kāi)發時(shí)注入成原生的 <style> 标簽以支持熱(rè)更新，而生産環境下(xià)它們會被抽取、合并成單獨的 CSS 文件。

你可(kě)以在 Vue SFC 演練場中實際使用一(yī)下(xià)單文件組件，同時(shí)可(kě)以看(kàn)到它們最終被編譯後的樣子。

在實際項目中，我們一(yī)般會使用集成了(le) SFC 編譯器的構建工(gōng)具，比如(rú) Vite 或者 Vue CLI (基于 webpack)，Vue 官方也提供了(le)腳手架工(gōng)具來幫助你盡可(kě)能(néng)快(kuài)速地(dì)上(shàng)手開(kāi)發 SFC。更多細節請(qǐng)查看(kàn) SFC 工(gōng)具鏈章(zhāng)節。

如(rú)何看(kàn)待關注點分離？ ​

一(yī)些有着傳統 Web 開(kāi)發背景的用戶可(kě)能(néng)會因為(wèi) SFC 将不同的關注點集合在一(yī)處而有所顧慮，覺得 HTML/CSS/JS 應當是分離開(kāi)的！

要(yào)回答(dá)這(zhè)個問(wèn)題，我們必須對這(zhè)一(yī)點達成共識：前端開(kāi)發的關注點不是完全基于文件類型分離的。前端工(gōng)程化的最終目的都(dōu)是為(wèi)了(le)能(néng)夠更好地(dì)維護代碼。關注點分離不應該是教條式地(dì)将其視(shì)為(wèi)文件類型的區(qū)别和(hé)分離，僅僅這(zhè)樣并不夠幫我們在日益複雜(zá)的前端應用的背景下(xià)提高開(kāi)發效率。

在現代的 UI 開(kāi)發中，我們發現與其将代碼庫劃分為(wèi)三個巨大的層，相互交織在一(yī)起，不如(rú)将它們劃分為(wèi)松散耦合的組件，再按需組合起來。在一(yī)個組件中，其模闆、邏輯和(hé)樣式本就是有內(nèi)在聯系的、是耦合的，将它們放在一(yī)起，實際上(shàng)使組件更有內(nèi)聚性和(hé)可(kě)維護性。

即使你不喜歡單文件組件這(zhè)樣的形式而仍然選擇拆分單獨的 JavaScript 和(hé) CSS 文件，也沒關系，你還是可(kě)以通(tōng)過資源導入功能(néng)獲得熱(rè)更新和(hé)預編譯等功能(néng)的支持。