单文件组件 (SFC)

Vue 3 的 SFC（Single File Components）是一种特殊的文件格式，它允许你将一个 Vue 组件的逻辑、模板和样式都写在一个 .vue 文件中。这种组织方式使得组件的开发更加集中和模块化，提高了代码的可读性和可维护性。

以下是 Vue 3 SFC 的工作原理：

1. 文件结构：一个 .vue 文件通常由三部分组成：<template>、<script> 和 <style>。<template> 部分包含组件的 HTML 结构，<script> 部分包含组件的逻辑（如数据、方法等），<style> 部分包含组件的样式。

2. 编译过程：当项目构建时，SFC 需要被编译成 JavaScript 代码，以便浏览器能够理解和执行。这个编译过程通常由 Vue 的构建工具（如 Vue CLI 或 Vite）和相关的加载器（如 vue-loader）来完成。

   • 解析：加载器首先解析 .vue 文件，将其分解为 <template>、<script> 和 <style> 三部分。
   • 转换：然后，加载器会对这三部分进行转换。<template> 部分会被转换为渲染函数或虚拟 DOM 节点，<script> 部分会被转换为 JavaScript 模块，<style> 部分则可能被转换为 CSS 字符串或其他格式。
   • 输出：最后，加载器将这些转换后的代码合并成一个 JavaScript 模块，并将其导出，供其他模块使用。

3. 运行时：在浏览器运行时，Vue 运行时库会接管这些编译后的代码，并根据组件的定义创建和渲染组件实例。当组件的数据发生变化时，Vue 的响应式系统会检测到这些变化，并自动更新组件的 DOM，以保持视图和数据的同步。

通过 SFC，你可以将组件的所有相关代码都放在同一个文件中，这有助于保持代码的清晰和一致。同时，由于 SFC 是基于 Vue 的编译和运行时系统的，因此你可以充分利用 Vue 提供的各种功能和优化，以构建高效、可维护的 Vue 应用程序。