Vue3中Ref响应式数组与对象的处理差异对比解析

在 Vue 的响应式体系里，ref 和 reactive 各有各的脾气。一句话总结：ref 能包罗万象，但取数据得靠 .value；reactive 只认对象和数组，直接点属性就成。基本类型绕不开 ref，复杂结构用 reactive 往往更顺手。不过，光记住口诀还不够——实际用起来，数组和对象在 ref 下到底有啥区别，才是真坑所在。

其实严格来说，Vue 里并没有“Ref 数组”或“Ref 对象”这种专有名词——ref 就是一股脑把任意值包起来，但数组和对象在用法、响应行为以及日常踩坑点上，确实差异不小。关键不在于 ref 本身，而在于你拿它包装了什么、怎么改、怎么读。

ref 包数组：.value 是标配，修改要看方法

ref 包装数组完全没问题，比如 const list = ref([1, 2, 3])，它能保持响应式。但有两个细节得留心：

• 读数据必须写 list.value，比如 list.value.length 或 list.value[0]——千万别幻想直接 list[0] 能行，那只会给你个 undefined。
• 改数组时，尽量用 Vue 能感知的原生方法：push()、pop()、splice()、sort() 这些都没问题，会触发视图更新。但别直接用 list.value = [4, 5, 6] 这样赋值——虽然也有效，但会切断原有的响应式连接，相当于重新造了一个引用。更稳妥的做法是用 list.value.splice(0, list.value.length, ...newArray) 来替换全部元素。
• 像 map、filter、slice 这类返回新数组的方法，改不了原数组，Vue 根本察觉不到变化，所以不能靠它们直接更新视图。

ref 包对象：能用但不够优雅

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 就不再响应了。
• 模板中访问深层属性有点啰嗦——《code>{{ state.user.profile.name }} 虽然能行，但看着不够简洁。

而 ref 正好补上这些短板：它能包一切，解构后也不丢响应（const { value: count } = ref(0) 照样能用），模板里还能自动解包（直接写 {{ count }}），又天然适配组合式 API 那种传参场景。说到底，不是二选一，而是看场景选工具。