为什么Vue中数组类型prop使用v-model绑定时无法正常更新？

问题原因 #

核心冲突是Vue3 reactive API的特性和v-model的默认赋值逻辑不匹配：

• 你在子组件触发update:modelValue时传递了全新的数组，v-model接收到新值后会直接给绑定的变量执行整体赋值操作
• reactive声明的数组是Proxy代理对象，直接对变量做整体赋值会覆盖原有的代理引用，将变量变为普通非响应式数组，无法触发视图更新。

修复方案 #

方案1（推荐）：用ref声明数组 #

ref对数组/对象的包裹会保留响应式能力，整体赋值时修改的是.value属性，不会丢失代理：

// App.vue 中修改setup逻辑
import { ref } from 'vue'
export default {
    components: {
        TestComponent
    },
    setup(){
        // 替换reactive为ref
        const myArr = ref([1,2,3]);
        return {
            myArr
        }
    }
}

模板代码无需修改，模板渲染时会自动解ref的.value。

方案2：保留reactive，修改赋值逻辑 #

如果需要继续用reactive，不要直接整体替换数组，修改为更新原代理数组的内部内容：

<!-- App.vue 中修改组件绑定逻辑，不直接用v-model自动赋值 -->
<test-component 
  :modelValue="myArr" 
  @update:modelValue="newArr => myArr.splice(0, myArr.length, ...newArr)"
/>

用splice方法修改原reactive数组的内容，不会丢失响应式代理。

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