reactive 是 Vue 3 中用于对象/数组响应式的核心工具，仅支持引用类型，需避免基础类型、整对象替换和直接解构；嵌套对象须显式 reactive 或 ref 处理，常与 ref 配合分工使用。
reactive 是 Vue 3 中定义对象类响应式数据最直接的工具，但它不是“万能包装纸”——用对了很顺手，用错了容易掉响应性。核心就一条：它只认对象，且依赖 Proxy 的深层代理机制。
什么时候该用 reactive
适合管理结构相对固定、以对象或数组为主体的状态，比如用户信息、表单数据、列表配置等。
- 用户资料：const user = reactive({ name: 'Alex', email: 'a@example.com' })
- 分页列表：const listState = reactive({ items: [], page: 1, loading: false })
- 配置对象：const theme = reactive({ primary: '#42b883', radius: '4px' })
这些场景下，属性访问自然（user.name）、修改简洁（user.email = 'new@…'），模板中也无需额外语法，写起来接近原生 JavaScript。
必须避开的三个典型坑
reactive 的限制很明确，踩中任意一个，响应式就会“静音”：
-
不能传基础类型：比如
reactive(42)或reactive('hello')会报错或退化为普通值，这类数据请用ref -
不能替换整个对象：写
state = reactive({ a: 1 })是无效的，因为变量重新赋值后指向了新对象，丢失了原始响应式代理；应始终操作已有代理的属性，如state.a = 2 -
解构会切断响应链：写
const { name, age } = state后，name和age变成普通变量，改它们不会触发更新；需用toRefs(state)解构，再通过name.value修改
嵌套对象要主动“加固”
reactive 默认深度代理，但动态新增嵌套层级时可能失效。例如：
const obj = reactive({ a: 1 });<br>obj.nested = { b: 2 }; // 此时 nested 不是响应式
安全做法是在初始化时就让嵌套结构也走 reactive：
- 显式包裹：const obj = reactive({ a: 1, nested: reactive({ b: 2 }) })
- 或用
ref替代深层嵌套：nested: ref({ b: 2 })，之后通过nested.value.b访问
这样能确保无论哪一层被修改，视图都可感知。
和 ref 配合使用更灵活
reactive 擅长管“大块结构”，ref 擅长管“单点状态”。实际项目中常混合使用：
- 用
reactive管理表单整体：const form = reactive({ username: '', password: '' }) - 用
ref单独控制某个开关：const showPassword = ref(false) - 需要把 reactive 对象的某个属性“拎出来”给子组件时，用
toRef(form, 'username')，避免解构失联
这种分工既保持访问简洁性，又守住响应式边界。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
