单文件组件（SFC）结构

Vue 的单文件组件（Single File Component，简称 SFC）以 .vue 为扩展名，将模板、逻辑和样式封装在一个文件中，保持代码高内聚、低耦合。

基本结构

一个标准的 .vue 文件包含三个核心快：

<template>
  <!-- HTML 模板 -->
</template>

<script>
  // JavaScript/TypeScript 逻辑
</script>

<style>
  /* CSS 样式 */
</style>

<template> 块

作用

• 定义组件的 HTML 模板结构。
• 支持所有 Vue 模板语法（指令、插槽等）。

特点

1. 必须包含单个根元素（Vue 3 支持多个根结点，单推荐保持单个）：

   <template>
   <div> <!-- 根元素 -->
       <h1>{{ title }}</h1>
       <button @click="handleClick">点击</button>
   </div>
   </template>

2. 支持纯 HTML 或其他模板引擎（如 Pug）：

   <template lang="pug">
   div
   h1 {{ title }}
   button(@click="handleClick") 点击
   </template>

3. 与逻辑分离：
   • 模板中不应包含复杂的逻辑，应通过 <script> 块或计算属性处理。

<script> 块

作用

• 定义组件的逻辑（数据、方法、生命周期等）。
• 支持选项式 API 或组合式 API。

选项式 API（Vue 2 风格）

<script>
  export default {
    data() {
      return {
        title: 'Hello Vue!'
      };
    },
    methods: {
      handleClick() {
        console.log('按钮被点击');
      }
    }
  };
</script>

组合式 API（Vue 3 风格）

<script setup>：

• 语法糖，自动暴露顶层变量到模板。
• 更简洁的 TypeScript 支持。

<script setup>
  import {ref} from 'vue';

  const title = ref('Hello Vue!');
  const handleClick = () => {
    console.log('按钮被点击');
  };
</script>

支持 TypeScript

<script setup lang="ts">
  const count: number = ref(0);
</script>

<style> 块

作用

• 定义组件的样式（CSS、SCSS、LESS 等）。

特点

1. 默认全局作用域：
   • 不加 scoped 时，样式会影响全局 DOM。

   <style>
   h1 { color: red; } /* 全局生效 */
   </style>

2. scoped 局部作用域：
   • 添加 scoped 后，样式仅作用于当前组件。
   • 原理：通过 data-v-xxx 属性选择器实现。

   <style scoped>
   h1 { color: red; } /* 仅当前组件生效 */
   </style>

3. 支持 CSS 预处理器：

   <style lang="scss">
   $primary-color: red;
   h1 { color: $primary-color; }
   </style>

4. 模块化 CSS（<style module>）
   • 将 CSS 类名映射为 JS 对象，避免命名冲突。

   <style module>
   .red { color: red; }
   </style>

   <template>
   <h1 :class="$style.red">标题</h1>
   </template>

SFC 编译过程

1. 解析：将 .vue 文件拆解为 template、script、style 三部分。
2. 编译：
   • <template> -> 渲染函数（Render Function）。
   • <script> -> JavaScript 代码。
   • <style> -> CSS 并注入 scoped 或模块化处理。
3. 打包：通过 Vite/Webpack 生成最终代码。