reactive 用于定义复杂对象的响应式状态，仅支持 Object、Array、Map、Set 等类型，返回代理对象，属性读写无需 .value；解构会丢失响应性，应使用 toRefs；不可直接替换整个对象。
用 reactive 定义复杂对象的响应式状态，核心就一句话：传入一个普通对象（或数组、Map、Set），它会返回一个响应式代理对象，原对象的嵌套属性全部自动变成可追踪、可更新的。
只对对象和集合类型有效
reactive 接收的参数必须是 Object、Array、Map、Set 等复杂类型。不能直接传基本类型（如字符串、数字、布尔值），否则会警告并静默失败。
- ✅ 正确：
reactive({ name: 'Alice', hobbies: ['reading', 'coding'] }) - ✅ 正确：
reactive([1, 2, { id: 1 }]) - ❌ 错误：
reactive('hello')或reactive(42)—— 应改用ref
修改属性直接生效，无需 .value
与 ref 不同，reactive 返回的是一个“看起来完全像原对象”的代理。你在 JS 中读写属性、调用方法、遍历数组，都和操作普通对象一样，不需要加 .value。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 读取：
state.name、state.items[0].id - 修改：
state.name = 'Bob'、state.items.push({ id: 2 }) - 深层嵌套也响应：
state.profile.address.city = 'Shanghai'会触发更新
注意解构会丢失响应性
如果你从 reactive 对象中解构出某个属性，比如 const { name } = state，那这个 name 就只是个普通变量，后续修改不会影响视图。
- ❌ 失效写法：
const { count } = state; count++—— 页面不更新 - ✅ 保持响应：用
toRefs(state)解构，或始终通过state.count访问 - ? 常见场景：在组合式函数中返回多个响应式字段时，推荐用
return toRefs(state)
不能直接替换整个对象
reactive 的响应性绑定在代理实例上。如果你给变量重新赋值，比如 state = reactive({})，原来的响应连接就断了，模板里依然绑定着旧代理。
- ❌ 错误：
state = reactive({ new: true }) - ✅ 正确：清空再赋值属性，例如
Object.assign(state, { new: true })，或逐个重设state.new = true
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
