ref支持所有类型且需.value访问，reactive仅支持引用类型且直接访问属性；ref可整体替换值，reactive替换会丢失响应式；ref本质是响应式包装盒，reactive基于proxy代理对象。

Vue 3 的响应式系统围绕 ref 和 reactive 展开，二者表面相似，实则分工明确、底层迥异。选错 API 不仅增加冗余代码，还容易引发响应式丢失、解构失效或赋值中断等隐性问题。

适用数据类型决定起点

这是最根本的分水岭：

• ref 支持所有类型：字符串、数字、布尔、null、undefined、对象、数组、Map、Set —— 全部可直接传入。Vue 内部会按需处理：基础类型直接包装；对象/数组则自动调用 reactive 深层代理。
• reactive 仅限引用类型：只接受对象、数组、Map、Set。传入数字或字符串时，不会报错但完全无响应式效果 —— 它根本无法代理原始值。

访问方式影响开发体验

写法差异直接影响脚本逻辑和模板表达：

php版微信js-sdk支付接口类

php版微信js-sdk支付接口类

下载

• ref 在 JavaScript 中必须通过 .value 读写，例如 count.value++；但在模板中 Vue 自动解包，写 {{ count }} 即可。
• reactive 在 JS 和模板中都直接访问属性，如 state.name = 'Alice' 或 {{ state.name }}，无需额外语法。

重新赋值与解构行为不可忽视

这两点常被低估，却极易导致响应式断裂：

• ref 允许整体替换：user.value = { name: 'Bob', age: 25 }，响应式保持完整。
• reactive 禁止直接赋新对象：state = { name: 'Bob' } 会彻底丢失响应式；正确做法是逐个赋值或用 Object.assign(state, newData)。
• 两者直接解构都会丢失响应式：const { name } = user 或 const { name } = state 得到的是普通值。解构 reactive 需搭配 toRefs；ref 解构后仍需通过 .value 访问原值。

底层机制决定能力边界

理解原理才能预判行为：

• reactive 基于 ES6 Proxy，对整个对象做拦截，支持深层嵌套响应式，但受限于 Proxy 无法代理原始值的天然限制。
• ref 是一个带 get value() 和 set value() 的类实例（RefImpl），本质是“响应式包装盒”。它把原始值塞进 .value，再通过访问器实现依赖追踪与更新触发。
• 当 ref({ ... }) 被调用时，Vue 实际执行的是 ref(reactive(...)) —— 所以它比 reactive 多一层包裹，但换来通用性与灵活性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！