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

一、单文件组件（.vue）核心定义与结构

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

1. 三大组成部分说明

二、数据绑定核心内容

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

1. 初识数据绑定

1.1 定义数据

Vue3提供基础写法和setup语法糖写法（推荐），语法糖可大幅简化代码，提高开发效率。

写法1：基础写法（setup函数）

<script>
export default {
    setup() {
        return {
            数据名: 数据值,
            // 可定义多个数据，以键值对形式存在
            ...
        }
    }
}
</script>

• 核心要点：export default是模块导出语法；setup()是Vue3组合式API的起点，需通过return暴露数据给模板；组件实例创建时执行该代码。

写法2：setup语法糖写法（推荐）

<script setup>
// 直接定义变量即可，无需export和return，自动暴露给模板
const 数据名 = 数据值;
</script>

• 核心要点：在<script>标签添加setup属性即可使用，代码更简洁，是Vue3开发首选方式。

1.2 输出数据

使用Vue提供的Mustache语法（双大括号语法），在<template>中作为占位符，页面渲染时会被替换为实际数据。

基本语法

<template>
  {
  { 数据名 }}
</template>

支持的表达式类型

Mustache语法可直接解析表达式，返回结果作为输出内容，示例如下：

<template>
  {
  { 'Hello Vue.js' }}       <!-- 字符串表达式 -->
  {
  { number + 1 }}            <!-- 算术运算表达式 -->
  {
  { obj.name }}              <!-- 对象属性取值表达式 -->
  {
  { ok ? 'YES' : 'NO' }}     <!-- 三元运算符表达式 -->
  {
  { '<div>HTML标签</div>' }} <!-- HTML字符串（会被当作纯文本输出，不解析标签） -->
</template>

1.3 基础数据绑定实操示例

步骤1：创建src\components\Message.vue文件，编写代码

<template>{
  { message }}</template>
<script setup>
const message = '不积跬步,无以至千里'
</script>

步骤2：修改src\main.js文件，切换展示组件

import { createApp } from 'vue'
import './style.css'
// 替换为自定义的Message组件
import App from './components/Message.vue'

createApp(App).mount('#app')

页面效果：

2. 响应式数据绑定

2.1 普通数据的问题

直接定义的普通数据，修改后数据本身会变化，但页面视图不会同步更新，示例验证如下：
修改src\components\Message.vue：

<template>{
  { message }}</template>
<script setup>
let message = '不积跬步,无以至千里'
// 2秒后修改数据
setTimeout(() => {
    console.log("更新前的message:" + message)
    message = '长风破浪会有时, 直挂云帆济沧海'
    console.log('更新后的message:' + message)
}, 2000)
</script>

效果验证：

• 控制台：能打印出更新前、后的数据值，说明数据本身已修改；
• 页面：始终显示原始数据，说明视图未同步更新。

2.2 响应式数据定义函数

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

函数1：ref()

• 作用：将基本类型数据/引用类型数据转换为响应式数据，是Vue3中最常用的响应式函数；
• 语法：

  // 导入ref函数
  import {
        ref } from 'vue'
  // 定义响应式数据
  const 响应式数据 = ref(初始数据值)
  // 修改响应式数据（必须通过.value属性）
  响应式数据.value = 新值
  

• 实操示例：
  ① 创建src\components\Ref.vue

  <template>{
      { message }}</template>
  <script setup>
  // 导入ref函数
  import { ref } from 'vue'
  // 定义ref响应式数据
  const message = ref('会当凌绝顶,一览众山小')
  // 2秒后修改数据
  setTimeout(() => {
      message.value = '锲而不舍,金石可镂'
  }, 2000)
  </script>
  

  ② 修改src\main.js切换组件

  import App from './components/Ref.vue'
  

  ③ 页面效果：
  初始效果：
  2秒后效果：

函数2：reactive()

• 作用：专门创建响应式对象/响应式数组，仅支持引用类型（对象、数组），不支持基本类型；
• 语法：

  // 导入reactive函数
  import {
        reactive } from 'vue'
  // 定义响应式对象/数组
  const 响应式对象 = reactive(普通对象/普通数组)
  // 修改响应式数据（直接修改属性/元素，无需.value）
  响应式对象.属性名 = 新值
  

• 实操示例：
  ① 创建src\components\Reactive.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切换组件

  import App from './components/Reactive.vue'
  

  ③ 页面效果：
  初始效果：
  2秒后效果：

函数3：toRef()

• 作用：将响应式对象中的单个属性转换为独立的响应式数据，修改该数据会同步更新原响应式对象；
• 语法：

  // 导入reactive、toRef函数
  import {
        reactive, toRef } from 'vue'
  // 先定义基础响应式对象
  const 响应式对象 = reactive({
        属性1: 值1, 属性2: 值2 })
  // 将单个属性转为响应式数据
  const 响应式属性 = toRef(响应式对象, '属性名')
  // 修改数据（需通过.value）
  响应式属性.value = 新值
  

• 实操示例：
  ① 创建src\components\ToRef.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切换组件

  import App from './components/ToRef.vue'
  

  ③ 页面效果：
  初始效果：
  2秒后效果：

函数4：toRefs()

• 作用：将响应式对象中的所有属性一次性转换为独立的响应式数据，返回一个包含所有响应式属性的对象，可通过解构赋值快速使用，修改属性会同步更新原响应式对象；
• 语法：

  // 导入reactive、toRefs函数
  import {
        reactive, toRefs } from 'vue'
  // 先定义基础响应式对象
  const 响应式对象 = reactive({
        属性1: 值1, 属性2: 值2 })
  // 将所有属性转为响应式数据，解构赋值获取
  const {
        属性1, 属性2 } = toRefs(响应式对象)
  // 修改数据（需通过.value）
  属性1.value = 新值
  

• 实操示例：
  ① 创建src\components\ToRefs.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切换组件

  import App from './components/ToRefs.vue'
  

  ③ 页面效果：
  初始效果：
  2秒后效果：

三、核心知识点总结

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()定义响应式数据，通用性更强。