reactive(obj) 用 Proxy 把对象变成响应式，访问时触发依赖追踪。但它有两个死角：基本类型（字符串/数字）没法代理、解构或整体替换会丢失响应性。ref(value) 就是来补这两点的——它把值包进一个 { value } 的 ref 对象，任何类型都能响应式，.value 赋值整体替换也安全。
选型口诀：对象/数组用 reactive（模板里写 obj.name 直观）；基本类型与需要整体替换的用 ref（模板里自动解包不用写 .value）。一个常见强迫症争论「统一用 ref 还是混用」——官方两都支持，团队统一风格即可。
<div id="app"> <p>{{ user.name }} / {{ count }}</p> <button @click="count++; user.name = 'Jack'">+</button> </div> <script> const { createApp, ref, reactive } = Vue; createApp({ setup() { const user = reactive({ name: 'Tom', age: 20 }); // 对象用 reactive const count = ref(0); // 基本类型用 ref return { user, count }; }, }).mount('#app'); // 反面教材：reactive 解构丢响应性 // const { name } = user; name 不再响应式 → 用 toRefs(user) </script>