一、寫在前面：為什么“單文件”如此迷人  

在 jQuery 時代，HTML、CSS、JavaScript 散落三處；在 React 時代，JSX 把三者揉進一份邏輯。Vue 單文件組件（Single File Component，簡稱 SFC）則給出第三種答案：把“結構、樣式、行為”封裝進一個 `.vue` 文件，讓組件成為可復用、可測試、可版本管理的原子單元。本文用近四千字，帶你走完從語法、思維、工程化到性能優化的完整鏈路。

二、歷史脈絡：從全局變量到原子組件  

- 2014 年：Vue 0.11 引入 `.vue`，但需 webpack + vue-loader。  
- 2016 年：Vue 2.0 正式推廣 SFC，生態工具鏈成熟。  
- 2020 年：Vue 3 帶來 Composition API、`<script setup>`，語法更簡潔。  
理解演進，才能明白 `<script setup>` 為何成為新默認。

三、思維轉換：從“頁面”到“組件”  

1. 單一職責  
   組件只解決一個問題：按鈕就是按鈕，表格就是表格。  
2. 單向數據流  
   props 向下，事件向上，避免雙向綁定地獄。  
3. 組合優于繼承  
   用 slot、Composition API 組合，而非深層 props 傳遞。  
4. 樣式隔離  
   scoped CSS 防止沖突，CSS Modules 解決命名空間。

四、語法全景：Options API vs Composition API  

1. Options API  
   data、methods、computed、watch 語義清晰，適合小型組件。  
2. Composition API  
   reactive、ref、computed、watchEffect，邏輯聚合，適合復雜交互。  
3. `<script setup>`  
   語法糖，減少樣板代碼，自動暴露頂層變量。  
4. TypeScript 加持  
   defineProps、defineEmits、withDefaults，類型安全一步到位。

五、樣式策略：從 Scoped 到 CSS Modules  

1. Scoped CSS  
   自動加哈希，避免全局污染。  
2. CSS Modules  
   類名編譯成唯一標識，支持變量、嵌套。  
3. 預處理器  
   Sass、Less、Stylus 按需選擇，變量與 mixin 提升復用。  
4. PostCSS 插件  
   autoprefixer、px-to-viewport、tailwindcss 鏈式處理。

六、插槽機制：讓組件“開口說話”  

1. 匿名插槽  
   默認內容，外部可覆蓋。  
2. 具名插槽  
   header、footer 語義化。  
3. 作用域插槽  
   子組件向父組件暴露數據，實現高階組件。  
4. 動態插槽  
   用 v-bind:slot 實現運行時插槽名。

七、生命周期：從創建到卸載的旅程  

- beforeCreate / created：初始化注入。  
- beforeMount / mounted：DOM 操作。  
- beforeUpdate / updated：數據變更后鉤子。  
- beforeUnmount / unmounted：清理定時器、事件監聽。  
Composition API 用 onMounted、onUnmounted，邏輯更集中。

八、工程化：工具鏈、規范、CI/CD  

1. 構建工具  
   Vite 冷啟動 <1 s，webpack 生態成熟。  
2. 規范  
   ESLint + Prettier + Stylelint 統一風格。  
3. 單測  
   Vitest / Jest + Vue Test Utils 覆蓋組件邏輯。  
4. 文檔  
   VitePress / Storybook 自動生成交互文檔。  
5. CI/CD  
   GitHub Actions / GitLab CI 自動測試、構建、發布。

九、性能優化：從首屏到運行時  

1. 打包體積  
   Tree-shaking、動態 import、按需加載圖標。  
2. 運行時  
   keep-alive 緩存組件、v-memo 減少 diff。  
3. 首屏  
   SSR / hydrate，首屏渲染 <100 ms。  
4. 網絡  
   使用 HTTP/2、CDN、懶加載。

十、實戰案例：一個復雜組件的誕生  

- 需求：可折疊樹 + 搜索 + 多選 + 虛擬滾動。  
- 拆分：TreeItem 子組件、SearchBar、CheckboxGroup。  
- 實現：Composition API + 作用域插槽 + v-memo。  
- 測試：單元 + 端到端。  
- 上線：性能提升 40 %。

十一、未來趨勢：VitePress、微前端、Web Components  

- VitePress：用 SFC 寫文檔，享受熱更新。  
- 微前端：qiankun、single-spa 加載獨立 SFC。  
- Web Components：編譯為 Custom Elements，跨框架復用。

十二、每日一練：親手寫組件庫  

1. 準備：按鈕、輸入框、對話框。  
2. 規范：ESLint + Prettier。  
3. 文檔：VitePress。  
4. 發布：NPM。  
5. 復盤：記錄耗時與踩坑。

十三、結語：把 SFC 當第一性原理  

單文件組件讓“組件即產品”，把“樣式、邏輯、數據”封裝成原子。  
當你下一次搭建應用時，請記得：  
不是框架限制了你，而是組件思維解放了你。