一、写在前面：为什么“单文件”如此迷人  

在 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 当第一性原理  

单文件组件让“组件即产品”，把“样式、逻辑、数据”封装成原子。  
当你下一次搭建应用时，请记得：  
不是框架限制了你，而是组件思维解放了你。