学习 Vue

第 3 章 组成组件

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在上一章中，您学习了 Vue 的基础知识以及如何使用 Options API 编写带有常用指令的 Vue 组件。现在，您已准备好深入学习下一个层次：使用反应性和钩子组成更复杂的 Vue 组件。

本章将介绍 Vue 单文件组件（SFC）标准、组件生命周期钩子以及其他高级反应式特性，如计算属性、观察者、方法和 ref。您还将学习使用插槽动态渲染组件的不同部分，同时通过样式保持组件的结构。本章结束时，你将能够在应用程序中编写复杂的 Vue 组件。

Vue 单文件组件结构

Vue 引入了一种新的文件格式标准，即 Vue SFC，扩展名为.vue 。使用 SFC，您可以在同一个文件中为一个组件编写 HTML 模板代码、JavaScript 逻辑和 CSS 样式，每个部分都有专门的代码。Vue SFC 包含三个基本代码部分 ：

模板

该 HTML 代码块渲染组件的用户界面视图。每个组件只能在最高级别的元素 上出现一次。

脚本

该 JavaScript 代码块包含组件的主要逻辑，每个组件文件最多只能出现一次 。

风格

此 CSS 代码块包含组件的样式。它是可选的，每个组件文件可根据需要多次出现 。

例 3-1是一个名为MyFirstComponent 的 Vue 组件的 SFC 文件结构示例。

例 3-1. MyFirstComponent 组件的 SFC 结构

<template>
 <h2 class="heading">I am a a Vue component</h2>
</template>
<script lang="ts">
export default {
 name: 'MyFistComponent',
};
</script>
<style>
.heading {
  font-size: 16px;
}
</style>

我们还可以将非 SFC 组件代码重构为 SFC，如图 3-1 所示。

图 3-1. 将组件从非 SFC 格式重构为 SFC 格式

如图 3-1所示，我们进行了如下重构：

• 将作为template 字段字符串值显示的 HTML 代码移至单一文件组件的<template> 部分。

• 将MyFirstComponent 逻辑的其余部分移至单一文件组件的<script> 部分，作为export default {} 对象的一部分。

使用 Typescript 的提示

您应该在<script> 语法中为 TypeScript 添加属性lang="ts" ，如<script lang="ts"> ，这样 Vue 引擎就知道如何相应地处理代码格式 。

由于.vue 文件格式是一种独特的扩展标准，因此您需要使用专门的构建工具（编译器/反编译器），如 Webpack、Rollup 等，将相关文件预先编译成合适的 JavaScript 和 CSS，以便在浏览器端提供服务。使用 Vite 创建新项目时，Vite 已将这些工具设置为脚手架流程的一部分。然后，您可以将组件作为 ES 模块导入，并将其声明为内部components ，以便在其他组件文件中使用 。

以下是导入components ...