reactive()仅适用于引用类型且不可整体替换。它不支持基本数据类型，解构会丢失响应性，官方推荐优先使用ref以统一访问模式并确保响应式安全。
Vue 3 的 reactive() 确实让对象响应式变得直观，但它不是万能钥匙——它的设计决定了它有明确的适用边界。用错场景，轻则响应失效，重则逻辑难以追踪。
只能处理引用类型，不支持基本数据
这是最基础的限制：reactive() 接收的必须是对象、数组、Map、Set 等引用类型。传入字符串、数字或布尔值会直接报错或静默失败。
-
❌ 错误写法：
const count = reactive(0)或const name = reactive("Vue") -
✅ 正确替代：改用
ref(0)或ref("Vue")，它们专为基本类型设计
不能整体替换响应式对象
Vue 的响应式依赖对同一对象引用的持续追踪。一旦你给 reactive 变量重新赋值，旧引用就断开了，新对象不会自动接入响应式系统。
-
❌ 危险操作：
let state = reactive({ a: 1 }); state = reactive({ a: 2 });—— 第二行后，state已失去响应性 -
✅ 安全做法：只修改属性，如
state.a = 2；若需“重置”，应提前保存初始结构，再逐项赋值或使用Object.assign(state, initialState)
解构会丢失响应性
从 reactive 对象中直接解构出原始类型属性（如 number、string），得到的是普通 JS 值，不再与源对象联动。
立即学习“前端免费学习笔记（深入）”；
-
❌ 常见误区：
const { count } = state; count++—— 视图不会更新 -
✅ 可靠方案：保持对象访问路径，如始终用
state.count++；或用toRefs()包装后再解构，确保每个 ref 仍可追踪
模板中友好，但组合式逻辑里易踩坑
虽然在模板里 {{ state.count }} 写起来很清爽，但在 setup 函数中，一旦涉及函数传参、条件分支或临时变量，reactive 的引用脆弱性就会暴露。
- 向外部函数传递
state.count，传进去的是普通数字，不是响应式连接 - 在
computed或watch中依赖解构后的值，可能无法触发更新 - 官方推荐优先使用
ref，正是因为它统一了访问模式（.value）、支持任意类型、且整体赋值安全
