Vue组件渲染函数出现无限更新循环问题求助

我来帮你揪出这个无限循环的根源，并且给你可行的修复方案。

首先，咱们先分析为什么会出现这个问题：

• 你在@change事件里直接修改响应式数组selectedFeatureArray，而且用了splice+push两次操作，每次修改都会触发Vue的响应式更新，导致组件重新渲染。
• 你判断同分类项的时候用了product.category === model.category，这是对象引用比较——如果你的orderCategories是响应式的，或者每次渲染时category对象的引用有变化，这个判断就会失效，导致反复执行删除和添加操作，进而触发无限循环。

接下来是具体的修复步骤，直接上修改后的代码和解释：

修复后的脚本代码 #

selectCatOption(selectedorderCategory, selectedAddon) {
  // 先做非空判断，避免无效操作
  if (!selectedorderCategory || !selectedAddon) return;

  // 用category的id做唯一标识，替代不可靠的对象引用比较
  const targetCategoryId = selectedorderCategory.id;
  const model = {
    id: selectedAddon.id,
    name: selectedAddon.name,
    category: selectedorderCategory,
    primary: selectedAddon.primary,
    loyalty_price: selectedAddon.loyalty_price,
    price_type: selectedAddon.price_type,
    price: selectedAddon.price,
    discount: selectedAddon.discount,
    discount_special: selectedAddon.special_discount,
  };

  // 创建数组副本，避免直接修改原数组触发多次响应式更新
  const updatedFeatureArray = [...this.selectedFeatureArray];
  
  // 用categoryId查找同分类的项，不再依赖对象引用
  const existingCategoryIndex = updatedFeatureArray.findIndex(
    product => product.category.id === targetCategoryId
  );
  
  if (existingCategoryIndex !== -1) {
    // 删除已存在的同分类项
    updatedFeatureArray.splice(existingCategoryIndex, 1);
  }
  
  // 检查当前model是否已经在数组中，避免重复添加
  const isModelAlreadyPresent = updatedFeatureArray.some(
    product => product.id === model.id
  );
  if (!isModelAlreadyPresent) {
    updatedFeatureArray.push(model);
  }

  // 一次性赋值，只触发一次响应式更新
  this.selectedFeatureArray = updatedFeatureArray;
}

关键修复点说明 #

1. 替换对象引用比较为id比较：
   用category.id来判断是否是同分类项，彻底解决了对象引用变化导致的判断错误，避免了无意义的删除/添加操作。

2. 减少响应式更新次数：
   先创建数组副本，在副本上完成所有修改后再一次性赋值给原数组——这样只会触发一次响应式更新，而不是splice和push各触发一次，大幅降低组件反复渲染的概率。

3. 增加重复判断：
   避免把同一个model重复添加到数组里，进一步减少不必要的数组操作。

额外注意事项 #

• 确保selectedCatAddon在data中是初始化好的响应式对象：

  data() {
    return {
      selectedCatAddon: {}, // 必须提前定义，确保是响应式的
      selectedFeatureArray: [],
      // ...其他数据
    }
  }
  

  如果是Vue2，动态添加selectedCatAddon的属性时要用this.$set，不过你的v-model绑定写法已经能自动处理，但提前初始化更稳妥。

这样修改后，应该就能彻底解决无限更新循环的问题了。

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