Vue单文件组件

一、前言

随着前端工程化的发展，组件化开发已成为主流趋势。Vue.js 作为当前最流行的前端框架之一，其核心特性之一就是支持一种被称为“单文件组件（Single File Component, SFC）”的开发模式。

本文将带你深入了解：

• 什么是 Vue 单文件组件
• 单文件组件的基本结构
• 各部分的作用及最佳实践
• 与非单文件组件的区别
• 实际开发中的优势与应用场景

二、什么是 Vue 单文件组件？

Vue 单文件组件 是指以 .vue 为后缀的文件，它将一个组件的 模板（template）、逻辑（script） 和 样式（style） 封装在一个文件中，形成一个独立、可复用的 UI 模块。

这种结构借鉴了 Web Components 的思想，但更贴合 Vue 的开发习惯和生态体系。

示例：一个最简单的 .vue 文件

在这个例子中，我们定义了一个组件：