Vue 单文件组件 SFC-技术圈

Vue 单文件组件 (Single File Components, SFC) 是 Vue.js 提供的一种组件格式，允许开发者在一个文件中编写组件的模板、脚本和样式。SFC 通常以 .vue 文件为扩展名。以下是 SFC 的工作原理和其各个部分的详细解释：

SFC 文件结构

一个典型的 Vue SFC 文件包含三个部分：

1.模板 (<template>)：定义组件的 HTML 结构。2.脚本 (<script>)：定义组件的逻辑、数据和方法。3.样式 (<style>)：定义组件的样式。

例如：

<template>  <div class="example">    <p>{{ message }}</p>  </div></template>
<script>export default {  data() {    return {      message: 'Hello, Vue!'    };  }};</script>
<style scoped>.example {  color: red;}</style>

                                  +--------------------+                                  |                    |                                  |  script transform  |                           +----->+                    |                           |      +--------------------+                           |+--------------------+     |      +--------------------+|                    |     |      |                    ||  facade transform  +----------->+ template transform ||                    |     |      |                    |+--------------------+     |      +--------------------+                           |                           |      +--------------------+                           +----->+                    |                                  |  style transform   |                                  |                    |                                  +--------------------+

// main scriptimport script from '/project/foo.vue?vue&type=script'// template compiled to render functionimport { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'// cssimport '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'
// attach render function to scriptscript.render = render
// attach additional metadata// some of these should be dev onlyscript.__file = 'example.vue'script.__scopeId = 'xxxxxx'
// additional tooling-specific HMR handling code// using __VUE_HMR_API__ global
export default script

编译过程

Vue SFC 的编译过程通常由构建工具（如 webpack 或 Vite）处理，这些工具会使用特定的加载器（如 vue-loader 或 @vitejs/plugin-vue）来解析和编译 SFC 文件。以下是编译过程的基本步骤：

1.解析 SFC 文件：构建工具读取 .vue 文件，并将其分解为模板、脚本和样式三个部分。2.编译模板：模板部分会被编译为渲染函数（render function），这是 Vue 内部使用的一种高效的渲染机制。3.处理脚本：脚本部分通常会被直接导入并执行，生成组件的逻辑部分。4.处理样式：样式部分会被编译为 CSS，并注入到页面中。如果使用了 scoped 属性，样式会被作用域化，以确保它们只影响当前组件。5.生成模块：最终，构建工具生成一个包含模板、脚本和样式的 JavaScript 模块，该模块可以在应用中被导入和使用。

热模块替换 (HMR)

为了提升开发体验，Vue SFC 支持热模块替换 (HMR)：

•模板更新：模板更新时，Vue 会重新编译模板并更新渲染函数，但不会重置组件的状态。•样式更新：样式更新时，新的样式会被注入到页面中，而无需重新渲染组件。•脚本更新：脚本更新时，组件会重新加载，但可以通过保存组件的状态来避免完全重置。

示例

假设我们有一个简单的 Vue SFC 文件 HelloWorld.vue：

<template>  <div>    <h1>{{ title }}</h1>  </div></template>
<script>export default {  data() {    return {      title: 'Hello, World!'    };  }};</script>
<style scoped>h1 {  color: blue;}</style>

在构建过程中：

1.模板部分会被编译为渲染函数。2.脚本部分会被处理为一个 JavaScript 模块，包含组件的逻辑。3.样式部分会被编译为 CSS，并注入到页面中，确保样式只影响当前组件。

总结

Vue 单文件组件通过将模板、脚本和样式集中在一个文件中，提供了良好的组件化开发体验。构建工具通过解析和编译 SFC 文件，将其转换为高效的 JavaScript 模块，并支持热模块替换以提升开发效率。