[toc]

Lecture04-响应式

1、本节讲什么

理解 Vue 最核心的"响应式"：数据一变，页面自动更新，不用你手动找元素改。学会用 ref 声明响应式数据，并掌握它的访问方式。

2、概念速览

什么是响应式：你用 ref 包一个数据，改动它时，页面上所有用到它的地方自动刷新——你只管改数据，页面自己跟着变。这是上一节"渲染"的升级：不是渲染一次就完，而是"数据一变就自动重新渲染那部分"。

类比 Java：像一个"被观察的变量"，一变就通知所有"监听"它的人（模板里的展示）自动刷新。

正确 vs 误区：响应式不是"刷新整个页面"，而是"只更新变了的那一处"。前提是——你改的是 ref 包的数据，而不是普通变量。

3、先看效果

点按钮年龄 +1，"已成年"标签自动出现：

<script setup lang="ts">
import { ref } from 'vue'

// ref()：包一个"响应式数据"。值一变，页面自动更新
const user = ref({ name: '小明', age: 20 })

function grow() {
  user.value.age += 1   // 注意：ref 数据在脚本里要用 .value 访问
}
</script>

<template>
  <h1>{{ user.name }}</h1>
  <p>年龄：{{ user.age }}</p>
  <button @click="grow">长大一岁</button>

  <!-- 数据一变，这个 v-if 会自动重新判断，不需要你手动刷新页面 -->
  <p v-if="user.age >= 18">已成年</p>
</template>

4、照着做

1. 替换 App.vue，保存看效果。
2. 点"长大一岁"，观察年龄 +1、"已成年"标签的变化——这就是响应式：你没碰页面，页面自己变了。
3. 体会关键：你改的是数据（user.value.age），页面是自动跟着变的——这就是 Vue 的思维方式。
4. 试一下"在脚本里直接改普通变量"，看页面是否不变，反证"要改就改 ref 包的数据"。

5、常见疑问

• Q：ref 是什么？为什么访问要用 .value？ A：ref 把一个普通值变成"响应式值"，改动会触发页面更新。脚本里用 .value 访问；模板里不用（Vue 自动解包，直接写 user.age）。
• Q：user 是个对象，为什么 user.value.age 这样改也会响应式？ A：ref 包住对象后，对象内部的属性也会被追踪。你改 user.value.age，模板里的 {{ user.age }} 会自动更新。
• Q：ref 和普通变量到底差在哪？ A：普通变量改了页面不会动；ref 包的数据改了，页面自动重新渲染。所以"页面要跟着变的数据"一律用 ref。
• Q：响应式和渲染（第 10 节）什么关系？ A：渲染是"把数据填进页面一次"；响应式是"数据一变，Vue 自动帮你再填一次那部分"。响应式建立在渲染之上。

补充：reactive——另一种响应式写法

reactive 是 Vue 声明响应式的另一种方式，专用于对象 / 数组，脚本里访问时不用 .value：

<script setup lang="ts">
import { reactive } from 'vue'
const form = reactive({ username: '', age: 18 })
// 访问 / 修改：直接 form.username，不用 .value
function reset() { form.username = '' }
</script>

ref vs reactive 怎么选？

项目约定（防疑惑）：平时统一用 ref 更省心、更少踩坑（reactive 不能包基本类型、解构会失效）。看到别人代码里的 reactive（比如第 20 节表单、老项目），认得即可——它同样管响应式，只是写法不同。

6、规范要点

• 页面要跟着变的数据一律用 ref，别用普通变量。
• 变量命名清晰（user、age、todos），别起 a、b 这种名字，让 AI 生成的代码你能一眼看懂。
• 想手动改页面时，先问自己"我应该改哪个数据"——这是 Vue 的核心思维，也是防屎山的习惯。

7、本节验证

• 能说清“响应式 = 数据一变，只自动更新变了的那部分” ✅
• 会用 ref() 声明页面要跟着变的数据 ✅
• 知道脚本里要用 .value、模板里自动解包不用写 ✅
• 说得清 ref 数据和普通变量在页面效果上的区别 ✅
• 认得 reactive 写法，并知道项目约定统一用 ref ✅