如何重构Vue计算属性中的嵌套if条件以降低Sonar认知复杂度？

原代码通过大量嵌套if判断按钮禁用条件，导致认知复杂度过高。核心优化思路是将判断规则配置化，用数组存储所有禁用规则，通过遍历数组统一检查条件，消除重复的分支逻辑。

重构后的代码 #

首先定义禁用规则数组，把每个radio与对应input的关联规则抽离出来：

// 组件内定义常量，复用规则
const DISABLE_RULES = [
  { radioKey: 'radio3', radioValue: 'yes', inputKey: 'input1' },
  { radioKey: 'radio4', radioValue: 'yes', inputKey: 'input2' },
  { radioKey: 'radio4', radioValue: 'no', inputKey: 'input6' },
  { radioKey: 'radio5', radioValue: 'no', inputKey: 'input3' },
  { radioKey: 'radio6', radioValue: 'yes', inputKey: 'input4' },
  { radioKey: 'radio6', radioValue: 'no', inputKey: 'input5' },
  { radioKey: 'radio7', radioValue: 'no', inputKey: 'input7' },
  { radioKey: 'radio8', radioValue: 'no', inputKey: 'input8' },
  { radioKey: 'radio9', radioValue: 'no', inputKey: 'input9' },
];

const isButtonSubmit = computed(() => {
  // 使用数组some方法：只要有一条规则满足，就返回true（按钮禁用）
  return DISABLE_RULES.some(rule => {
    const radioValue = formInput.value[rule.radioKey];
    const inputValue = formInput.value[rule.inputKey];
    return radioValue === rule.radioValue && inputValue === '';
  });
});

优化优势 #

• 降低认知复杂度：消除了多层嵌套的if分支，逻辑一目了然
• 易维护性：后续新增/修改禁用规则，只需在DISABLE_RULES数组中调整，无需改动判断逻辑
• 语义清晰：some方法的语义是"存在任意一个满足条件的元素"，完全匹配按钮禁用的逻辑（只要有一个规则触发就禁用）
• 性能优化：规则数组定义为常量，避免每次计算属性执行时重复创建数组

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