Vue.js 响应式 Ref 数组与对象处理差异

ref适用于所有类型，必须用.value访问；reactive仅支持对象/数组，直接属性访问；基本类型必须用ref，复杂结构推荐reactive。

Vue 中的 ref 本身不区分“Ref 数组”或“Ref 对象”这种说法——它统一包装任意值，但数组和对象在使用方式、响应行为和实际注意事项上确实有明显差异。关键不在 ref 类型，而在于你用 ref 包什么、怎么改、怎么读。

ref 包数组：得靠 .value 访问，但修改要小心

ref 可以安全包装数组，比如 const list = ref([1, 2, 3])。它能响应式，但要注意：

• 读取时必须写 list.value（例如 list.value.length 或 list.value[0]）
• 修改数组内容时，推荐用 Vue 能捕获的原生方法：push()、pop()、splice()、sort() 等——这些会触发视图更新
• 避免直接赋值新数组（如 list.value = [4, 5, 6]），虽然有效，但会丢失原有响应式连接；更稳妥的是用 list.value.splice(0, list.value.length, ...newArray)
• 不能用 map、filter、slice 这类返回新数组的方法直接更新，因为它们不改原数组，Vue 捕捉不到变化

ref 包对象：可响应，但嵌套深了不如 reactive 直观

ref 也能包装对象，例如 const user = ref({ name: 'Alice', age: 30 })，但它和 reactive 的体验不同：

• 访问属性必须通过 user.value.name，不能直接 user.name（否则报错或读不到）
• 如果对象内部有深层嵌套（比如 user.value.profile.address.city），每次读写都要带一长串 .value，容易出错也难维护
• 新增属性默认是响应式的（因为 ref 内部对对象仍用 Proxy 处理），但不如 reactive 那样天然支持整个结构的响应追踪
• 一般不推荐用 ref 包复杂对象——结构明确、字段多、嵌套深时，优先选 reactive

什么时候该用 ref？重点看“值”的性质

ref 的设计初衷不是为了替代 reactive，而是解决基本类型无法响应的问题。所以判断依据很实在：

立即学习“前端免费学习笔记（深入）”；

• 单个数字、字符串、布尔值（如 loading = ref(false)、searchTerm = ref('')）→ 必用 ref
• 异步获取的数据（如 data = ref(null)，后续 data.value = await api.get()）→ 用 ref 更自然
• 需要与 v-model 配合的输入框、开关等 → ref 是标准做法
• 函数返回值、计算中间状态、独立开关量 → ref 更轻量、语义更清晰

数组和对象都用 reactive？那 ref 还有啥用？

reactive 确实更适合数组和结构化对象，但它有硬性限制：

• 不能接收原始类型（reactive(42) 会警告且无效）
• 解构后会失活（const { count } = reactive({ count: 0 }) → count 不再响应）
• 模板中访问深层属性略显冗长（{{ state.user.profile.name }}）

而 ref 没这些限制：它能包一切，解构安全（const { value: count } = ref(0) 仍可用），模板中自动解包（{{ count }}），还天然适配组合式 API 的参数传递场景。