## 一、单文件组件（.vue）核心定义与结构
每个`.vue`文件对应一个Vue单文件组件，是Vue组件的专属文件格式，由**模板、样式、逻辑**三部分构成，各部分各司其职且结构固定。

### 1. 三大组成部分说明
| 组成部分 | 对应标签 | 核心功能 | 关键注意点 |
| ---- | ---- | ---- | ---- |
| 模板 | `<template>` | 搭建当前组件的DOM结构，仅作为包裹容器，不会被渲染为真实DOM元素 | 每个组件最多1个顶层`<template>`；Vue3支持**多根节点**，Vue2仅支持**单根节点**（必须有唯一外层根标签包裹） |
| 样式 | `<style>` | 通过CSS代码为当前组件设置样式 | 可添加`scoped`属性实现组件样式隔离，避免样式污染 |
| 逻辑 | `<script>` | 通过JavaScript代码处理组件的数据定义、业务逻辑 | Vue3提供`setup`语法糖，简化数据和方法的定义与暴露 |

## 二、数据绑定核心内容
Vue通过数据绑定实现**数据与页面分离**，最终达成**数据驱动视图**的效果，核心解决重复编写页面模板的问题（如图书商城复用图书详情页模板，仅修改数据展示不同内容）。
数据绑定分为**定义数据**和**输出数据**两个核心步骤，且普通数据无响应式，需通过专属函数处理为响应式数据，才能实现数据变化视图同步更新。

### 1. 初识数据绑定
#### 1.1 定义数据
Vue3提供**基础写法**和**setup语法糖写法**（推荐），语法糖可大幅简化代码，提高开发效率。
##### 写法1：基础写法（setup函数）
```vue
<script>
export default {
	setup() {
		return {
			数据名: 数据值,
			// 可定义多个数据，以键值对形式存在
			...
		}
	}
}
</script>
```
- 核心要点：`export default`是模块导出语法；`setup()`是Vue3组合式API的起点，需通过`return`暴露数据给模板；组件实例创建时执行该代码。

##### 写法2：setup语法糖写法（推荐）
```vue
<script setup>
// 直接定义变量即可，无需export和return，自动暴露给模板
const 数据名 = 数据值;
</script>
```
- 核心要点：在`<script>`标签添加`setup`属性即可使用，代码更简洁，是Vue3开发首选方式。

#### 1.2 输出数据
使用Vue提供的**Mustache语法（双大括号语法）**，在`<template>`中作为占位符，页面渲染时会被替换为实际数据。
##### 基本语法
```vue
<template>
  {{ 数据名 }}
</template>
```
##### 支持的表达式类型
Mustache语法可直接解析表达式，返回结果作为输出内容，示例如下：
```vue
<template>
  {{ 'Hello Vue.js' }}       
  {{ number + 1 }}            
  {{ obj.name }}              
  {{ ok ? 'YES' : 'NO' }}     
  {{ '<div>HTML标签</div>' }} 
</template>
```

#### 1.3 基础数据绑定实操示例
**步骤1**：创建`src\components\Message.vue`文件，编写代码
```vue
<template>{{ message }}</template>
<script setup>
const message = '不积跬步,无以至千里'
</script>
```
**步骤2**：修改`src\main.js`文件，切换展示组件
```vue
import { createApp } from 'vue'
import './style.css'
// 替换为自定义的Message组件
import App from './components/Message.vue'

createApp(App).mount('#app')
```
**页面效果**：
![基础数据绑定页面效果](https://developer.qcloudimg.com/http-save/yehe-1342542/d91acea4d96f13e1bdd5b76ec8208980.png)

### 2. 响应式数据绑定
#### 2.1 普通数据的问题
直接定义的普通数据，修改后**数据本身会变化，但页面视图不会同步更新**，示例验证如下：
修改`src\components\Message.vue`：
```vue
<template>{{ message }}</template>
<script setup>
let message = '不积跬步,无以至千里'
// 2秒后修改数据
setTimeout(() => {
    console.log("更新前的message:" + message)
    message = '长风破浪会有时, 直挂云帆济沧海'
    console.log('更新后的message:' + message)
}, 2000)
</script>
```
**效果验证**：
![普通数据修改效果](https://developer.qcloudimg.com/http-save/yehe-1342542/a52815c6f3e5e7a29da0f70cf3faf73b.png)
- 控制台：能打印出更新前、后的数据值，说明数据本身已修改；
- 页面：始终显示原始数据，说明视图未同步更新。

#### 2.2 响应式数据定义函数
Vue3提供`ref()`、`reactive()`、`toRef()`、`toRefs()`四个函数，用于将普通数据处理为**响应式数据**，实现**数据变化 → 视图自动同步更新**，四个函数适用场景不同，需按需选择。

##### 函数1：ref()
- **作用**：将**基本类型数据/引用类型数据**转换为响应式数据，是Vue3中最常用的响应式函数；
- **语法**：
  ```javascript
  // 导入ref函数
  import { ref } from 'vue'
  // 定义响应式数据
  const 响应式数据 = ref(初始数据值)
  // 修改响应式数据（必须通过.value属性）
  响应式数据.value = 新值
  ```
- **实操示例**：
  ① 创建`src\components\Ref.vue`
  ```vue
  <template>{{ message }}</template>
  <script setup>
  // 导入ref函数
  import { ref } from 'vue'
  // 定义ref响应式数据
  const message = ref('会当凌绝顶,一览众山小')
  // 2秒后修改数据
  setTimeout(() => {
      message.value = '锲而不舍,金石可镂'
  }, 2000)
  </script>
  ```
  ② 修改`src\main.js`切换组件
  ```vue
  import App from './components/Ref.vue'
  ```
  ③ **页面效果**：
  初始效果：![ref初始效果](https://developer.qcloudimg.com/http-save/yehe-1342542/fff7ae5c6a6f4a7b6a44c94d516ce74c.png)
  2秒后效果：![ref更新效果](https://developer.qcloudimg.com/http-save/yehe-1342542/83efbcc4324db6eae64b9353c6d9350b.png)

##### 函数2：reactive()
- **作用**：专门创建**响应式对象/响应式数组**，仅支持引用类型（对象、数组），不支持基本类型；
- **语法**：
  ```javascript
  // 导入reactive函数
  import { reactive } from 'vue'
  // 定义响应式对象/数组
  const 响应式对象 = reactive(普通对象/普通数组)
  // 修改响应式数据（直接修改属性/元素，无需.value）
  响应式对象.属性名 = 新值
  ```
- **实操示例**：
  ① 创建`src\components\Reactive.vue`
  ```vue
  <template>{{ obj.message }}</template>
  <script setup>
  // 导入reactive函数
  import { reactive } from 'vue'
  // 定义reactive响应式对象
  const obj = reactive({ message: '不畏浮云遮望眼,自缘身在最高层' })
  // 2秒后修改数据
  setTimeout(() => {
      obj.message = '欲穷千里目,更上一层楼'
  }, 2000)
  </script>
  ```
  ② 修改`src\main.js`切换组件
  ```vue
  import App from './components/Reactive.vue'
  ```
  ③ **页面效果**：
  初始效果：![reactive初始效果](https://developer.qcloudimg.com/http-save/yehe-1342542/b5debc606452660dd56c6d809de98a19.png)
  2秒后效果：![reactive更新效果](https://developer.qcloudimg.com/http-save/yehe-1342542/98df20bf653aa7f69c31e8a7abab5ebf.png)

##### 函数3：toRef()
- **作用**：将**响应式对象中的单个属性**转换为独立的响应式数据，修改该数据会同步更新原响应式对象；
- **语法**：
  ```javascript
  // 导入reactive、toRef函数
  import { reactive, toRef } from 'vue'
  // 先定义基础响应式对象
  const 响应式对象 = reactive({ 属性1: 值1, 属性2: 值2 })
  // 将单个属性转为响应式数据
  const 响应式属性 = toRef(响应式对象, '属性名')
  // 修改数据（需通过.value）
  响应式属性.value = 新值
  ```
- **实操示例**：
  ① 创建`src\components\ToRef.vue`
  ```vue
  <template>
      <div>message的值:{{ message }}</div>
      <div>obj.message的值:{{ obj.message }}</div>
  </template>
  <script setup>
  // 导入所需函数
  import { reactive, toRef } from 'vue'
  // 定义基础响应式对象
  const obj = reactive({ message: '黑发不知勤学早,白首方悔读书迟' })
  // 将obj的message属性转为独立响应式数据
  const message = toRef(obj, 'message')
  // 2秒后修改数据
  setTimeout(() => {
      message.value = '少壮不努力,老大徒伤悲'
  }, 2000)
  </script>
  ```
  ② 修改`src\main.js`切换组件
  ```vue
  import App from './components/ToRef.vue'
  ```
  ③ **页面效果**：
  初始效果：![toRef初始效果](https://developer.qcloudimg.com/http-save/yehe-1342542/63430dd834194c3c612f498ac6f56f66.png)
  2秒后效果：![toRef更新效果](https://developer.qcloudimg.com/http-save/yehe-1342542/0c8110daecbbe01ea7419aeffcc8a706.png)

##### 函数4：toRefs()
- **作用**：将**响应式对象中的所有属性**一次性转换为独立的响应式数据，返回一个包含所有响应式属性的对象，可通过解构赋值快速使用，修改属性会同步更新原响应式对象；
- **语法**：
  ```javascript
  // 导入reactive、toRefs函数
  import { reactive, toRefs } from 'vue'
  // 先定义基础响应式对象
  const 响应式对象 = reactive({ 属性1: 值1, 属性2: 值2 })
  // 将所有属性转为响应式数据，解构赋值获取
  const { 属性1, 属性2 } = toRefs(响应式对象)
  // 修改数据（需通过.value）
  属性1.value = 新值
  ```
- **实操示例**：
  ① 创建`src\components\ToRefs.vue`
  ```vue
  <template>
      <div>message的值:{{ message }}</div>
      <div>obj.message的值:{{ obj.message }}</div>
  </template>
  <script setup>
  // 导入所需函数
  import { reactive, toRefs } from 'vue'
  // 定义基础响应式对象
  const obj = reactive({ message: '盛年不重来,一日难再晨' })
  // 将obj的所有属性转为响应式数据，解构获取message
  let { message } = toRefs(obj)
  // 2秒后修改数据
  setTimeout(() => {
      message.value = '及时当勉励,岁月不待人'
  }, 2000)
  </script>
  ```
  ② 修改`src\main.js`切换组件
  ```vue
  import App from './components/ToRefs.vue'
  ```
  ③ **页面效果**：
  初始效果：![toRefs初始效果](https://developer.qcloudimg.com/http-save/yehe-1342542/6f308a32a2effc250afe0bb408542e07.png)
  2秒后效果：![toRefs更新效果](https://developer.qcloudimg.com/http-save/yehe-1342542/c6bdf4895801e3541ecf8f7d1daafed5.png)

## 三、核心知识点总结
### 1. 单文件组件关键
1. Vue3 对`<template>`的根节点限制放宽，支持多根节点，解决Vue2外层根标签的冗余问题；
2. `<script setup>`是Vue3推荐写法，无需`export default`和`return`，直接定义数据/方法即可暴露给模板；
3. `<style scoped>`是组件样式隔离的核心方式，开发中建议默认添加。

### 2. 数据绑定关键
1. 基础数据绑定通过**定义数据（setup）+ 输出数据（双大括号）**实现，仅能完成数据的初始展示；
2. Mustache语法支持各类简单表达式，但会将HTML字符串解析为纯文本，无法渲染DOM。

### 3. 响应式数据核心
1. 响应式是Vue数据驱动视图的**核心底层**，普通数据需通过Vue3专属函数处理后才具备响应式；
2. `ref()`是通用响应式函数，支持所有数据类型，修改时**必须加.value**（模板中使用无需加）；
3. `reactive()`仅支持对象/数组，修改时直接操作属性/元素，**无需.value**；
4. `toRef()`和`toRefs()`基于**已有响应式对象**创建，用于拆分对象属性，实现属性的独立响应式，修改后会同步更新原对象；
5. 所有响应式函数使用前**必须先从vue中导入**，否则会报错。

### 4. 开发实操注意
1. 切换组件的核心方式是修改`src\main.js`中`import App from 'xxx'`的导入路径；
2. 定时器是验证响应式的常用方式，可直观看到数据和视图的更新效果；
3. 开发中优先使用`setup`语法糖，简化代码编写；优先使用`ref()`定义响应式数据，通用性更强。

每个.vue文件对应一个Vue单文件组件，是Vue组件的专属文件格式，由模板、样式、逻辑三部分构成，各部分各司其职且结构固定。

《Vue.js前端开发实战》学习笔记 第2章 单文件组件、数据绑定

Vue单文件组件（.vue）由template、script、style三部分构成，支持多根节点与scoped样式。数据绑定通过双大括号语法实现；响应式需用ref()（基础类型）、reactive()（对象/数组）等函数处理，配合setup语法糖可大幅提升开发效率。

编程语言

前端

Vue单文件组件(.vue)由模板、样式和逻辑三部分组成，支持setup语法糖简化开发。数据绑定通过Mustache语法实现，响应式数据需使用ref()或reactive()函数处理。掌握组件结构和数据响应式是Vue开发的核心要点，能有效提升开发效率。

数据转换

容器

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

《Vue.js前端开发实战》学习笔记 第2章 单文件组件、数据绑定-腾讯云开发者社区-腾讯云

《Vue.js前端开发实战》学习笔记第2章单文件组件、数据绑定

《Vue.js前端开发实战》学习笔记第2章单文件组件、数据绑定

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

《Vue.js前端开发实战》学习笔记 第2章 单文件组件、数据绑定

《Vue.js前端开发实战》学习笔记 第2章 单文件组件、数据绑定

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

《Vue.js前端开发实战》学习笔记第2章单文件组件、数据绑定

《Vue.js前端开发实战》学习笔记第2章单文件组件、数据绑定