reactive() 创建对象的响应式代理
最后更新：2026-10-22
reactive() 创建对象的响应式代理
reactive() 把对象或数组包装成深度响应式代理，直接读写属性即可触发更新。
| 分组 | 响应式·核心 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
const state = reactive({ count: 0 })
state.count++ // 直接读写，无需 .value⚙️ 参数
| target | 对象、数组或 Map/Set 等集合类型 |
|---|
返回值：原对象的响应式代理，两者指向同一份数据
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
显示「数量：0」，点击按钮递增。💡 要点
⚠️ 注意 只对对象/数组有效：传基本类型（数字、字符串）会失去响应性，那要用 ref()。
⚠️ 注意 解构会丢响应性：const { count } = state 拿到的是普通数字，需 toRefs(state) 或直接用 state.count。
ℹ️ 说明 整体替换（state = reactive({})）会切断原有代理连接，ref 可以整体替换而 reactive 不行。
🏷️ 相关核心
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q reactive 和 ref 该用哪个？
A 团队默认推荐 ref：任意类型、可整体替换、解构不丢响应性；reactive 只在明确要对象风格（state.xxx）时用。
Q 为什么修改 state.xxx 页面就更新了？
A reactive 用 Proxy 拦截了属性读写，读取时收集依赖、写入时通知更新。
Q reactive 的对象和原对象是什么关系？
A 同一份数据：改代理等于改原对象，只是代理带上了响应式追踪能力。
