Vue：v-for内绑定v-model时数组对象批量更新异常的解决问询

问题根源 #

出现所有对象同步更新的情况，主要有两个原因：

1. 子组件错误处理了props的引用，导致多个子组件共享同一对象引用；
2. 添加新对象时复用了同一个对象实例，而非创建独立的新对象。

修复步骤 #

1. 修正子组件的双向绑定逻辑

子组件无需将props转为ref后返回，直接基于props和emit实现双向绑定即可，避免引用混乱。以下是Vue3组合式API的正确写法：

<template>
  <input v-model="localName" />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  calc: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:calc'])

// 用计算属性实现双向绑定，避免直接修改props
const localName = computed({
  get() {
    return props.calc.name
  },
  set(val) {
    // 传递对象副本，避免引用覆盖
    emit('update:calc', { ...props.calc, name: val })
  }
})
</script>

如果使用watch监听，需确保监听props对象的属性变化：

<template>
  <input v-model="props.calc.name" />
</template>

<script setup>
import { watch } from 'vue'

const props = defineProps({
  calc: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:calc'])

// 深度监听对象属性变化
watch(props.calc, (newVal) => {
  emit('update:calc', { ...newVal })
}, { deep: true })
</script>

2. 确保添加新对象时创建独立实例

父组件的addCalculator方法中，每次添加都要生成新的对象实例，不能复用同一个引用：

<script>
export default {
  data() {
    return {
      calculators: [
        { name: "some name" },
        { name: "some name 2" }
      ]
    }
  },
  methods: {
    addCalculator() {
      // 每次创建新的对象实例
      this.calculators.push({ name: "default name" })
    }
  }
}
</script>

如果需要复用默认配置，通过对象展开创建新对象：

const defaultCalc = { name: "default name", value: 0 }

// 在方法中生成新对象
this.calculators.push({ ...defaultCalc })

3. 优化v-for的key值（可选但推荐）

避免使用数组index作为key（元素顺序变化时易引发渲染异常），建议使用对象的唯一标识作为key，比如每个calc有id字段：

<row v-for="calc in calculators" :key="calc.id">
  <child-component v-model:calc="calc"></child-component>
</row>

验证修复效果 #

完成修改后，编辑任意子组件的输入框只会更新对应数组元素的属性，其他对象不会同步变化；添加新对象时会生成独立实例，不会和现有对象共享引用。

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