Vue中数组内ref绑定v-model出现异常行为问题排查

你遇到的核心问题是直接把ref对象塞进了普通数组，Vue对数组内的ref对象不会自动解包，导致v-model的绑定逻辑完全偏离预期。

具体细节：

• 第一行v-model="message"能正常工作，是因为Vue会自动对单独的ref变量解包，实际绑定的是message.value，组件接收的modelValue是字符串'hello'，更新时也会自动把新值赋值给message.value。
• 第二行v-model="myArr[0]"出问题，是因为myArr[0]是ref对象本身，Vue不会自动解包它。组件接收的modelValue是这个ref对象，所以input初始值会变成[object Object]；当你输入内容时，update:modelValue会把字符串新值直接替换掉myArr[0]里的ref对象，后续自然失去响应式能力。

有两种标准修复方式，按需选择：

方式一：用reactive创建响应式数组（推荐） #

把普通数组换成reactive包裹的响应式数组，数组里直接存原始值（不需要ref）：

// App.vue
<script setup>
import { ref, reactive } from 'vue'
import CustomInput from './CustomInput.vue'
  
const message = ref('hello')
const myArr = reactive(['hello']) // 直接存字符串，而非ref对象
</script>

<template>
  <CustomInput v-model="message" /> {{ message }}
  <br/>
  <CustomInput v-model="myArr[0]" /> {{ myArr[0] }}
</template>

这种方式完全符合Vue的响应式设计，数组内元素的变更会被自动追踪。

方式二：手动处理ref解包（仅用于理解原理） #

如果一定要在数组里存ref对象，需要手动访问.value并处理赋值逻辑：

// App.vue
<template>
  <CustomInput v-model="message" /> {{ message }}
  <br/>
  <CustomInput 
    :model-value="myArr[0].value" 
    @update:model-value="myArr[0].value = $event" 
  /> {{ myArr[0].value }}
</template>

这种方式代码冗余，实际项目不推荐，仅适合学习时理解ref的解包规则。

你之前尝试用ref包裹数组没用，是因为ref包裹数组时，Vue只会追踪数组本身的替换操作，不会追踪数组内元素的变更；而且数组里还是ref对象，依然存在自动解包的问题。数组类的响应式场景，优先用reactive。

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