1.4.3　了解Vue组件系统

组件是可以在Vue模板中使用的独立模块，它们抽象出逻辑并使模板更易于阅读。如果你使用过React或Angular前端框架，那么会比较熟悉组件概念。如果没有使用过，可以将组件视为应用程序的构建块。对于大型Vue应用程序，从上至下都是由组件构成的。

解释组件最简单的方法就是使用代码示例。例1.7是一个<custom-title>组件代码示例。注意Vue组件注册之后，就可以像HTML标签一样在代码中被使用。

例1.7　在Vue中注册全局组件

定义组件可以有多种不同的方式，但是在本书中，我将使用单文件组件（SFC）方式定义。

注释　本书中提及的所有技术均同样适用于任何被正确定义的Vue组件。

Vue单文件组件的文件可以通过.vue扩展名来识别。单文件组件可以包含一个<template>代码块（类似于一个模板字符串），一个<script>代码块，多个<style>代码块和自定义代码块（见例1.8）。

注释　本书中不会使用到任何自定义代码块，但你可以在vue-loader文档中阅读到相关内容http://mng.bz/xJBW。

<script>代码块中导出的对象称为组件选项对象，它接受Vue根实例的大多数选项。

例1.8　一个单文件组件（SFC）

单文件组件不是有效的JavaScript或HTML代码。你无法在浏览器中运行它们，因此在将单文件组件发送到客户端之前需要先编译它们。

编译后的单文件组件将成为JavaScript对象，并将模板转换为渲染函数，见例1.9。

例1.9　一个编译后的单文件组件

希望你没有被代码吓到，编译后的单文件组件没有可读性。你不需要关心编译后的渲染函数，那是Vue框架的工作。这里的重点是一个单文件组件被编译成一个具有渲染函数的对象。这会让你很好地了解应该测试一个组件的哪个部分。