Vue：如何停止编辑子元素列表时的递归渲染问题

针对你遇到的修改食材数组时触发循环重渲染的问题，推荐以下几种实用的处理方式：

1. 直接修改响应式元素属性，避免替换整个数组 #

当前你使用map生成新数组并替换原数组的方式，会导致整个食材列表重渲染，且toRaw的使用可能破坏响应式追踪。优化父组件的更新逻辑，直接找到目标食材并修改其属性即可：

function onIngredientChanged(updatedIngredient: IngredientModel) {
  const targetIngredient = editDish.value.ingredients.find(x => x.id === updatedIngredient.id);
  if (targetIngredient) {
    // 直接更新目标元素的属性，保持数组引用不变
    targetIngredient.name = updatedIngredient.name;
    targetIngredient.amount = updatedIngredient.amount;
    targetIngredient.unit = updatedIngredient.unit;
  }
}

这种方式只会更新单个食材的属性，Vue的响应式系统会精准触发对应子组件的重渲染，不会导致整个列表刷新，从根源上避免循环触发事件。

2. 直接绑定整个食材对象作为Props（最推荐） #

拆解单个属性传递给子组件的方式，不仅增加了代码冗余，还需要通过事件同步数据。更符合Vue响应式设计的做法是，直接将整个IngredientModel对象作为Props传给子组件：

子组件（IngredientEdit）修改： #

// 定义Props
const props = defineProps<{
  ingredient: IngredientModel;
}>();

<template>
  <input v-model="ingredient.name" placeholder="食材名称" />
  <input v-model.number="ingredient.amount" placeholder="数量" />
  <input v-model="ingredient.unit" placeholder="单位" />
</template>

父组件修改： #

<IngredientEdit
  v-for="i in editDish.ingredients"
  :key="i.id"
  :ingredient="i"
/>

此时子组件修改食材属性时，父组件的editDish.ingredients会自动同步更新，不需要额外的changed事件，彻底消除循环重渲染的可能，代码也更简洁。

3. 限制子组件事件触发时机（适合需额外校验的场景） #

如果业务上必须通过事件通知父组件（比如子组件需要做输入校验），需确保子组件仅在用户主动交互时触发changed事件，而非组件初始化/重渲染时：

子组件示例： #

const props = defineProps<{
  id: string;
  name: string;
  amount: number;
  unit: string;
}>();
const emit = defineEmits<{
  changed: [model: IngredientModel];
}>();

// 仅在用户输入时触发事件
const handleInput = () => {
  emit('changed', { ...props });
};

<template>
  <input :value="name" @input="handleInput" />
  <input :value="amount" @input="handleInput" type="number" />
  <input :value="unit" @input="handleInput" />
</template>

这种方式避免了组件重渲染时误触发事件，从而打断循环。

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