Vue3 入门教程：Vue.js 单文件组件（SFC）的使用

在 Vue3 的开发之旅中，Vue.js 单文件组件（SFC）是一项极为重要的特性，它极大地提升了代码的可维护性与复用性。

单文件组件以.vue 为后缀名，将模板（template）、脚本（script）和样式（style）封装在一个文件中。这种封装方式让代码结构更加清晰，每个组件都有自己独立的作用域。

首先来看模板部分（template）。它定义了组件的 HTML 结构，我们可以在其中使用 Vue 的指令，如 v-bind、v-on 等，实现数据的绑定和事件的监听。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">点击我</button>
  </div>
</template>

在这段代码中，{{ message }} 是插值语法，用于显示数据；@click 指令绑定了一个名为 changeMessage 的方法。

接着是脚本部分（script）。在这里，我们定义组件的逻辑，包括数据、方法、生命周期钩子等。以下是一个简单的示例：

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

const message = ref('初始消息');

const changeMessage = () => {
  message.value = '消息已改变';
};
</script>

在 script setup 中，使用 ref 来定义响应式数据，changeMessage 方法用于修改 message 的值。

最后是样式部分（style）。我们可以为组件添加局部样式，确保样式只作用于当前组件。例如：

<style scoped>
div {
  background-color: lightblue;
  padding: 20px;
}
</style>

scoped 属性使得样式仅在当前组件生效，避免了样式冲突。

使用 Vue.js 单文件组件，我们可以轻松构建复杂的应用。在大型项目中，将不同功能的组件独立封装，通过组件的嵌套和组合，能够快速搭建出页面结构。这种模块化的开发方式也方便团队协作，每个成员可以专注于自己负责的组件开发。掌握 Vue.js 单文件组件（SFC）的使用，是迈向 Vue3 高效开发的关键一步，它能帮助开发者更加高效地构建出高质量、易维护的前端应用程序。