watch监听代码优化

重构 - watch监听代码优化

优化前

watch: {
    'formData.zkdj'(newValue, oldValue) {
      this.formData.wgfy = Number(this.formData.wgsl) * Number(newValue);
    },
    'formData.wgsl'(newValue, oldValue) {
      this.formData.wgfy = Number(this.formData.zkdj) * Number(newValue);
    },
    'formData.ybjssl'(newValue, oldValue) {
      const { ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = this.formData;
      this.formData.cesl = Number(newValue) - (Number(qckcsl) + Number(bqgrsl)
       - Number(qmkcsl) - Number(xjxssl));
    },
    'formData.qckcsl'(newValue, oldValue) {
      const { ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = this.formData;
      this.formData.cesl = Number(ybjssl) - (Number(newValue) + Number(bqgrsl)
       - Number(qmkcsl) - Number(xjxssl));
    },
    'formData.bqgrsl'(newValue, oldValue) {
      const { ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = this.formData;
      this.formData.cesl = Number(ybjssl) - (Number(qckcsl) + Number(newValue)
       - Number(qmkcsl) - Number(xjxssl));
    },
    'formData.qmkcsl'(newValue, oldValue) {
      const { ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = this.formData;
      this.formData.cesl = Number(ybjssl) - (Number(qckcsl) + Number(bqgrsl)
       - Number(newValue) - Number(xjxssl));
    },
    'formData.xjxssl'(newValue, oldValue) {
      const { ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = this.formData;
      this.formData.cesl = Number(ybjssl) - (Number(qckcsl) + Number(bqgrsl)
       - Number(qmkcsl) - Number(newValue));
    },
  },

通义给的优化建议

methods: {
  calculateCesl() {
    const { ybjssl, qckcsl, bqgrsl, qmkcsl, xjxssl } = this.formData;
    this.formData.cesl = Number(ybjssl) - (Number(qckcsl) + Number(bqgrsl) - Number(qmkcsl) - Number(xjxssl));
  },
  updateWgfyBasedOnZkdj(newValue) {
    this.formData.wgfy = Number(this.formData.wgsl) * Number(newValue);
  },
  updateWgfyBasedOnWgsl(newValue) {
    this.formData.wgfy = Number(this.formData.zkdj) * Number(newValue);
  }
},
watch: {
  'formData.zkdj': 'updateWgfyBasedOnZkdj',
  'formData.wgsl': 'updateWgfyBasedOnWgsl',
  'formData.qckcsl': 'calculateCesl',
  'formData.bqgrsl': 'calculateCesl',
  'formData.qmkcsl': 'calculateCesl',
  'formData.xjxssl': 'calculateCesl'
}

问题

使用这种方式就丢失了newValue，导致最终计算结果不准确。

PASS

最终优化后

watch: {
    'formData': {
      handler(newValue, oldValue) {
        const { wgsl,zkdj,ybjssl,qckcsl,bqgrsl,qmkcsl,xjxssl } = newValue
        this.formData.wgfy = Number(wgsl) * Number(zkdj)
        this.formData.cesl = Number(ybjssl) - (Number(qckcsl) + Number(bqgrsl)
        - Number(qmkcsl) - Number(xjxssl))
      },
      deep: true
    },
  },

处理边界

watch: {
  'formData': {
    handler(newValue, oldValue) {
      const { wgsl, zkdj, ybjssl, qckcsl, bqgrsl, qmkcsl, xjxssl } = newValue;
      
      // 使用更清晰的括号风格，并添加NaN检查以确保数值有效性
      this.formData.wgfy = (Number.isFinite(wgsl) && Number.isFinite(zkdj)) 
        ? Number(wgsl) * Number(zkdj) 
        : 0; // 或其他默认值
      
      this.formData.cesl = Number.isFinite(ybjssl) 
        ? Number(ybjssl) - (
            (Number.isFinite(qckcsl) ? Number(qckcsl) : 0) +
            (Number.isFinite(bqgrsl) ? Number(bqgrsl) : 0) -
            (Number.isFinite(qmkcsl) ? Number(qmkcsl) : 0) -
            (Number.isFinite(xjxssl) ? Number(xjxssl) : 0)
          )
        : 0; // 或其他默认值
    },
    deep: true,
  },
},