單文(wén)件組件

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

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>

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

爲什(shén)麽要使用(yòng) SFC ​

使用(yòng) SFC 必須使用(yòng)構建工(gōng)具，但(dàn)作(zuò)爲回報(bào)帶來(lái)了(le)以下(xià)優點：

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

讓本來(lái)就強相關的關注點自(zì)然内聚

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

組件作(zuò)用(yòng)域的 CSS

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

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

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

開(kāi)箱即用(yòng)的模塊熱更新 (HMR) 支持

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

單頁面應用(yòng) (SPA)

靜态站(zhàn)點生成 (SSG)

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

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

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

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

js

import MyComponent from './MyComponent.vue'

export default {

components: {

MyComponent

}

}

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

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

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

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

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

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

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

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