Vue3中能否用单个computed实现多标签页差异化数学运算

你完全可以在单个computed计算属性中实现3个标签页的差异化计算逻辑，不需要拆分多个计算属性。

实现思路 #

核心是新增一个标记当前激活标签页的状态字段，计算属性同时监听标签页状态、三个输入值的变化，根据当前所处的标签页场景走对应的计算分支，自动算出待求的结果值。

• 新增activeTab状态，取值0/1/2分别对应「输入x、y求z」「输入x、z求y」「输入y、z求x」三个场景
• 计算属性内根据activeTab的值判断当前求解目标，基于x+y=z的公式做变形计算
• 模板中根据当前激活的标签页，动态禁用对应结果项的输入框，避免用户编辑自动计算出的结果
• 输入框类型改为number，从输入层限制数值类型，减少类型转换错误

完整实现代码 #

脚本部分 #

data() {
  return {
    activeTab: 0,
    x: null,
    y: null,
    z: null,
  };
},
computed: {
  calcMatchedResult() {
    // 统一转数值，处理输入框返回字符串的问题
    const valX = Number(this.x) || 0;
    const valY = Number(this.y) || 0;
    const valZ = Number(this.z) || 0;

    switch(this.activeTab) {
      case 0:
        // 场景1：已知x、y，求z
        this.z = valX + valY;
        break;
      case 1:
        // 场景2：已知x、z，求y
        this.y = valZ - valX;
        break;
      case 2:
        // 场景3：已知y、z，求x
        this.x = valZ - valY;
        break;
    }
    return true;
  }
}

模板部分 #

<!-- 标签页切换栏 -->
<div class="nav nav-tabs">
  <button class="nav-link" :class="{active: activeTab === 0}" @click="activeTab = 0">已知x、y求z</button>
  <button class="nav-link" :class="{active: activeTab === 1}" @click="activeTab = 1">已知x、z求y</button>
  <button class="nav-link" :class="{active: activeTab === 2}" @click="activeTab = 2">已知y、z求x</button>
</div>

<form>
  <div class="row">
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark">x</h6>
      <input
        type="number"
        class="form-control"
        autocomplete="off"
        :disabled="activeTab === 2"
        v-model="x"
      />
    </div>
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark">y</h6>
      <input
        type="number"
        class="form-control"
        autocomplete="off"
        :disabled="activeTab === 1"
        v-model="y"
      />
    </div>
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark">z</h6>
      <input
        type="number"
        class="form-control"
        autocomplete="off"
        :disabled="activeTab === 0"
        v-model="z"
      />
    </div>
  </div>
  <!-- 隐式引用计算属性，触发依赖收集 -->
  <span v-show="false">{{ calcMatchedResult }}</span>
</form>

注意事项 #

• x/y/z初始值设为null即可，不要默认赋值0，避免初始状态输入框显示无意义的0，增加用户操作成本
• 切换标签页时，之前的计算值会保留，如果需要切换标签时清空所有输入，可以给标签按钮加点击事件，重置x/y/z为null
• 代码里用隐式span引用计算属性是为了让Vue能收集到计算属性的依赖，只要依赖的activeTab/x/y/z任意一个值变化，计算逻辑就会自动执行

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