reactive 用于将对象或数组转为响应式，适用于多层嵌套结构如用户信息；需传入对象/数组等引用类型，解构会丢失响应性，应配合 toRefs 使用；常与 ref 混合使用，各司其职。
reactive 专门用来把一个普通对象（或数组）变成响应式对象，适合管理结构较复杂的、有多个嵌套属性的状态。
什么时候该用 reactive
当你需要响应式地管理一个对象或数组，比如用户信息、表单数据、配置项等，且这些数据天然就是对象形式时，直接用 reactive 更自然。它返回的是一个 Proxy 代理对象，所有属性访问和修改都自动响应。
- 对象字段多、有嵌套（如
{ user: { name: '', profile: { avatar: '' } } }） - 不需要频繁解构赋值后仍保持响应性（注意：解构会丢失响应性）
- 不涉及基本类型单独暴露（比如单独的数字、布尔值，这时优先用 ref）
怎么正确创建和使用
在 setup 函数中调用 reactive，传入一个普通对象即可。返回的对象可直接在模板中使用，无需额外解包。
react-modernization
下载
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
- 创建：
const state = reactive({ count: 0, title: 'Vue' }) - 读取：
state.count、state.title（直接点属性） - 修改：
state.count++或state.title = 'Vue 3' - 模板中：
{{ state.count }}，不用加.value
需要注意的关键细节
reactive 对输入有明确限制，用错会导致响应失效：
立即学习“前端免费学习笔记（深入）”；
- 只接受对象、数组、Map、Set、WeakMap、WeakSet —— 不能传
null、undefined、基本类型（如字符串、数字字面量） - 解构会丢失响应性：
const { count } = state后，count是普通变量，修改它不会触发更新 - 如果必须解构并保持响应，可用 toRefs：
const { count, title } = toRefs(state)，之后count.value才可读写 - 深层嵌套对象默认就是响应式的，不需要对子对象再调用 reactive
和 ref 的配合使用场景
实际开发中常混合使用：reactive 管理主对象，ref 处理需要独立暴露或可能被解构的值。
- 例如表单中，整个表单数据用 reactive，但提交按钮的加载状态用 ref：
const loading = ref(false) - 函数返回值、异步获取的数据对象，也常用 reactive 包裹后统一管理
- 避免把 reactive 当作“万能包装器”——基本类型别硬塞进去，该用 ref 就用 ref
