443 字
1 分钟
Ref vs Reactive：响应式的哲学思考 (头秃篇)
响应式的哲学
在深入学习 Vue 3 的过程中，不管是新手还是老鸟，都会遇到一个经典问题：ref 和 reactive 到底用哪个？
官方的定义
ref：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个.valueproperty，指向该内部值。reactive：返回对象的响应式副本。
看起来很简单，对吧？ref 处理基本类型，reactive 处理对象。但是在实际开发中，情况远比这复杂。
踩坑实录
我曾经试图用 reactive 去定义一个数组，结果发现直接重新赋值会丢失响应性！
let list = reactive([])// ... 异步获取数据后list = newData // ❌ 响应性丢失！界面不更新！为什么？因为 reactive 返回的是一个 Proxy 对象，直接赋值 list = newData 只是修改了变量 list 的引用，并没有修改原来的 Proxy 对象。
正确做法是用 ref，或者用 list.push(...newData)。但是 ref 每次都要写 .value，真的好烦啊！在模板里倒是会自动解包，但在 JS 逻辑里，少写一个 .value 就能让你调试半天。
深入思考
ref 更像是“指针”，明确地告诉我们这里有一个需要被追踪的值；而 reactive 则更贴近原生对象的直觉。
Vue 官方现在也更推荐优先用 ref 声明响应式状态，原因正是 reactive 不能直接替换整个对象、解构后又容易断开响应式连接。对象结构稳定、需要成组修改时我仍会用 reactive，其余情况先用 ref，规则反而更好记。
也许，与其每次临场纠结，不如先统一用 ref？毕竟，显式地使用 .value 虽然繁琐，但至少心安。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Ref vs Reactive：响应式的哲学思考 (头秃篇)
https://blog.luozili.work/posts/vue-learning-2/ 部分信息可能已经过时
相关文章 智能推荐
1
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。
2
深坑记录：响应式丢失的那一夜
Vue学习之路 复盘一次保存成功但列表不更新的问题，定位对象解构导致的 Vue 响应式丢失，并总结排查顺序。
3
Composition API：逻辑复用的快乐与痛苦
Vue学习之路 记录用 Composable 提取 Vue 3 业务逻辑时的收益、边界，以及逻辑复用过度后出现的新复杂度。
4
TypeScript：给代码穿上防弹衣 (虽然很重)
Vue学习之路 从一串类型报错出发，记录 Vue 3 项目接入 TypeScript 后的学习成本、常见问题和实际收益。
5
前端性能优化：只要我跑得够快，Bug 就追不上我
Vue学习之路 从一个包含 Three.js 和大量数据的页面出发，逐项记录代码分割、资源压缩、缓存与渲染优化。