Vue3中响应式数组内的ref为何不会自动解包？

Vue3 官方文档明确说明，响应式对象中的数组元素不会像对象属性那样自动解包 ref/computed，背后主要有以下几方面的考量：

1. 保持行为一致性与边界清晰 #

响应式系统中，对象属性的自动解包是因为属性通常存储业务数据，而数组场景更复杂：

• 数组的索引（数字或字符串形式的数字）和自定义属性难以完全区分：比如数组上挂载名为'10'的自定义属性时，自动解包逻辑会误将其当作数组索引处理，返回错误结果。
• 数组包含大量原生方法（如push、length），自动解包需要额外判断访问的是索引还是方法/属性，会模糊响应式系统的边界，增加理解成本。

2. 避免不必要的性能损耗 #

若为数组添加自动解包逻辑，每次访问数组元素时都需要：

• 判断当前访问的属性是否为合法索引
• 调用unref解包元素
  对于大型数组或高频访问场景，这会带来额外性能开销，违背Vue3响应式系统轻量化的设计初衷。

3. 防止隐性行为增加调试复杂度 #

自动解包会隐藏ref/computed的存在：

• 开发者无法直接获取原ref对象，若需要修改ref的value或操作computed依赖，会变得困难。
• 调试时看到的直接是解包后的值，难以追踪数据的响应式来源，增加排查问题的成本。

4. 兼容数组原生行为与现有响应式逻辑 #

Vue3对数组的响应式处理需要兼容原生数组的所有行为：

• 数组的splice、slice等方法会返回元素，若自动解包这些返回值，会改变原生方法的返回类型，破坏兼容性。
• 现有数组响应式拦截逻辑（如监听数组变更方法）与自动解包逻辑结合会产生冲突，增加系统复杂度。

关于自定义方案的局限性 #

你实现的Proxy解包方案虽能满足特定场景需求，但也存在潜在问题：

• 无法区分开发者是想存储ref对象还是解包后的值：若数组中需要保留原始ref（比如后续要修改其value），自动解包会直接返回值，导致无法获取原ref。
• 负索引处理存在问题：正则/^[-+]?\d+$/会匹配负数字符串（如'-1'），但JS数组中负索引并非合法元素索引，此时unref(target[Number(property)])会返回undefined，不符合预期。

内容的提问来源于stack exchange，提问作者Thomas Urban