在 Vue 3 中，使用 reactive() 可以将整个对象转为响应式，使其所有嵌套属性自动具备响应性，既简洁又类型安全，避免为每个字段手动创建 ref。
在 vue 3 中，使用 `reactive()` 可以将整个对象转为响应式，使其所有嵌套属性自动具备响应性，既简洁又类型安全，避免为每个字段手动创建 `ref`。
Vue 3 的响应式系统提供了两种核心 API：ref() 用于基本类型或独立值，而 reactive() 则专为对象设计——它会递归地将对象及其深层属性转换为响应式代理（Proxy），从而实现「每个属性天然响应」的效果。
例如，针对如下类型定义：
interface Dog {
name: string;
age: number;
}
传统方式需逐个封装：
const puppy: Dog = { name: 'Snoop', age: 2 };
const puppyName = ref(puppy.name); // ❌ 冗余、脱离原对象上下文
const puppyAge = ref(puppy.age);
这不仅重复繁琐，还导致数据源分散，修改 puppyName.value 并不会影响原始 puppy 对象，违背单一数据源原则。
✅ 推荐做法是直接用 reactive() 创建响应式对象：
import { reactive } from 'vue';
const puppy = reactive<dog>({
name: 'Snoop',
age: 2,
});
// 所有属性可直接访问与修改，且触发视图更新
console.log(puppy.name); // 'Snoop'
puppy.age++; // 响应式更新，关联的模板/计算属性自动重算</dog>
TypeScript 类型推导友好：reactive() 默认基于字面量自动推断精确类型（如 name: string），也可显式标注泛型
⚠️ 注意事项：
- reactive() 仅对对象、数组、Map、Set 等复杂类型有效，不能用于原始值（此时应使用 ref）；
- 解构响应式对象属性会丢失响应性（如 const { name } = puppy → name 是普通字符串），应始终通过 puppy.name 访问；
- 若需将 reactive 对象暴露给模板，建议在 setup() 中直接返回，或使用 toRefs() 在解构时保留响应性（适用于需要解构赋值的场景）。
总结：当目标是让一个对象的所有属性统一响应化时，reactive() 是最自然、最高效、最符合 Vue 3 设计哲学的方案——它消除了样板代码，保持类型完整性，并确保响应式行为的一致性与可维护性。
