响应式基础

这一课你将能做到

1. 正确使用 ref 与 reactive，并知道模板自动解包、script 需 .value
2. 用 toRefs / 解构陷阱解释「为什么解构丢响应式」
3. 对照 React useState：改数据的方式不同，但「UI 随状态变」一致

为什么要学

Vue 的自动更新建立在响应式系统上：它知道你读了哪些数据、改了哪些数据，从而精确更新。
不会 ref/reactive，就会出现「值改了页面不动」或「一解构全丢失」的常见卡点。

人话：ref 盒子装着值；reactive 把对象变成可追踪代理。

先建立图像

ref(0)  →  { value: 0 }   脚本用 .value，模板自动解包
reactive({ n: 0 }) → Proxy 对象，属性直接读写

解构 reactive 得到的普通变量 → 通常不再响应

API	适合	注意
ref	原始值、也可装箱对象	脚本 .value
reactive	对象结构清晰时	别整体替换丢代理
toRefs	解构仍要响应	每个属性变 ref

跟着做

步骤 1：ref 计数器

<script setup>
import { ref } from "vue";
const count = ref(0);
function inc() {
  count.value++;
}
</script>

<template>
  <button type="button" @click="inc">{{ count }}</button>
</template>

点按钮数字应增加。若写成 count++（没 .value）会不符合预期。

步骤 2：reactive 表单对象

<script setup>
import { reactive } from "vue";
const form = reactive({ title: "", level: "beginner" });
</script>

<template>
  <input v-model="form.title" placeholder="课名" />
  <p>{{ form.title }} · {{ form.level }}</p>
</template>

输入时应即时反映。v-model 下一课/表单场景常用——此处体验双向绑定。

步骤 3：解构陷阱

<script setup>
import { reactive } from "vue";
const form = reactive({ title: "SQL" });
// 错误示范：
const { title } = form; // title 是普通字符串快照
</script>

改 form.title，若模板绑的是已解构的 title，往往不更新。改用：

import { reactive, toRefs } from "vue";
const form = reactive({ title: "SQL" });
const { title } = toRefs(form); // title 是 ref

步骤 4：替换整个 reactive 对象？

let state = reactive({ n: 1 });
// 不推荐：state = reactive({ n: 2 }) 若别处仍握着旧引用会脱节
state.n = 2; // 改属性