深入浅出 Vue3：组件与模板基础全解析

一、Vue3 组件结构详解

1.1 单文件组件（SFC）架构

Vue3采用.vue单文件组件模式，一个典型组件包含三个区块：

<template>
  <!-- 组件的HTML模板 -->
</template>

<script setup>
  // 组件的JavaScript逻辑（推荐使用Composition API）
</script>

<style scoped>
  /* 组件的CSS样式（scoped表示样式隔离） */
</style>

各区块作用说明：

• <template>：定义组件视图层，支持所有HTML语法+Vue指令扩展

• <script setup>：使用setup语法糖简化响应式变量声明（替代Vue2的Options API）

• <style scoped>：添加scoped属性后，样式仅作用于当前组件（通过自动添加data-v-*属性实现）

1.2 组件导出与组合式API

通过<script setup>语法糖，无需显式导出组件对象：

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

// 响应式数据声明
const count = ref(0)
// 方法定义
const increment = () => count.value++
</script>

组合式API优势：

1. 更好的逻辑复用（通过自定义Hook）
2. 更灵活的逻辑组织（按功能而非选项类型拆分）
3. 更好的TypeScript支持

二、Vue3 模板语法深度解析

2.1 数据绑定核心语法

（1）文本插值：{ { }}

<p>Message: {
  
  { message }}</p>

• 支持JavaScript表达式：{ { message.split('').reverse().join('') }}
• 自动响应式更新（数据变化时视图同步更新）

（2）属性绑定：v-bind（简写:）