单文件组件

介绍

单文件组件语法定义

Vue的单文件组件(SFC)是一种文件格式,将Vue的组件模板,逻辑,样式封装在一个文件中,使得组件的开发更加模块化和可维护。

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

  const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>

为什么使用单文件组件

使用单文件组件必须使用构建工具,如webpack或vite等,这些工具可以处理Vue的特有语法,如<script setup>和<style scoped>等,并将它们编译成浏览器可以理解的代码。

使用构建工具有以下优点:

• 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
• 让本来就强相关的关注点自然内聚
• 预编译模板，避免运行时的编译开销
• 组件作用域的 CSS ，避免样式冲突
• 在使用组合式 API 时语法更简单
• 通过交叉分析模板和逻辑代码能进行更多编译时优化
• 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
• 开箱即用的模块热更新 (HMR) 支持

单文件组件是Vue框架提供的一个功能,官方推荐在一下场景中使用:

• 单页面应用(SPA)
• 静态站点生成(SSG)
• 任何值得引入构建步骤以获得更好的开发体验的项目

Vue也可以在无构建步骤的情况下以纯JavaScript方式使用.petite-vue是一个6kb左右预优化的Vue库,可以在浏览器中直接使用。

单文件组件是如何工作的

单文件组件是Vue框架约定的一种格式,必须交由@vue/compiler-sfc来处理,编译为标准的JavaScript和CSS.编译后的结果是一个标准的JavaScript(ESM)模块, 这也意味着在构建配置正确的前提下,可以像导入其他 ES 木块一样导入单文件组件:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent,
  },
}

单文件组件中的 <style> 标签一般会在开发时注入成原生的 <style> 标签以支持热更新，而生产环境下它们会被抽取、合并成单独的 CSS 文件。

在实际项目中，我们一般会使用集成了单文件组件编译器的构建工具，比如 Vite 或者 Vue CLI (基于 webpack).

如何看待关注点分离

前端工程化的最终目的都是为了能够更好地维护代码。关注点分离不应该是教条式地将其视为文件类型的区别和分离，仅仅这样并不够帮我们在日益复杂的前端应用的背景下提高开发效率。

在现代的 UI 开发中，我们发现与其将代码库划分为三个巨大的层，相互交织在一起，不如将它们划分为松散耦合的组件，再按需组合起来。在一个组件中，其模板、逻辑和样式本就是有内在联系的、是耦合的，将它们放在一起，实际上使组件更有内聚性和可维护性。

即使你不喜欢单文件组件这样的形式而仍然选择拆分单独的 JavaScript 和 CSS 文件，也没关系，你还是可以通过资源导入功能获得热更新和预编译等功能的支持。