为什么我的Vue JS应用开发环境正常，生产环境折扣功能会崩溃？

问题根因 #

• 核心死循环问题：你在模板插值中直接调用了会修改响应式状态的applyDiscount方法，对应代码是<div>{{this.applyDiscount()}}</div>。Vue的渲染逻辑是只要用到的响应式变量发生变更就会触发重新渲染，而applyDiscount方法内部修改了balance、discount、adjustment等多个响应式变量，会触发「渲染页面→调用方法修改变量→再次触发渲染→再次调用方法」的无限循环。Vue开发环境内置了死循环打断机制，所以不会崩溃，生产环境为了性能优化移除了这类调试用的保护逻辑，就会直接触发页面卡死。
• 辅助异常问题：缺少初始值校验，isPercentage在未选中单选框时为undefined，discountAmount未输入时是空值，直接参与数值计算会得到NaN，进一步加重运行异常。

修复步骤 #

1. 直接删除模板中的<div>{{this.applyDiscount()}}</div>这行代码，永远不要在模板插值中调用会修改响应式状态的方法。
2. 把折扣计算的触发逻辑调整为输入变化时主动调用：
   • 给折扣金额输入框添加@input="applyDiscount"属性
   • 在单选框的onChange事件处理函数末尾添加调用applyDiscount()的逻辑
3. 在applyDiscount开头增加空值校验逻辑，避免非法值参与计算：

applyDiscount(){
  // 空值/非法值拦截
  if(!this.isPercentage || this.discountAmount === '' || isNaN(Number(this.discountAmount))){
    this.discount = 0
    this.balance = this.totalCost - this.totalPaid
    this.str = ''
    return
  }
  // 以下保留你原有逻辑不变
  this.balance=this.totalCost-this.totalPaid
  if(this.isPercentage=='Percentage'){               
    if(this.discountAmount<=100 ){                    
      this.discount=(this.totalCost/100)*this.discountAmount
      this.form.discount=this.discount
      this.str=""          

      if(this.discount<=this.totalCost-this.totalPaid){
        this.adjustment=this.totalCost-this.discount
        this.balance=this.balance-this.discount
        this.str=""
      }
      else{
        this.str="Discount amount exceeding balance"                     
      }                  
    }
    else{
      this.str="Percentage is exceeding 100%"                     
    }  
  }else if(this.isPercentage=='Amount'){
    this.str=""
    this.discount=this.discountAmount
    this.form.discount=this.discount

    if(this.discount<=this.totalCost-this.totalPaid){
      this.adjustment=this.totalCost-this.discount
      this.balance=this.balance-this.discount
      this.str=""
    }
    else{
      this.str="Discount amount exceeding balance"                        
    } 
  }
}

4. 给相关变量设置合理初始值，在组件的data配置中添加：

data() {
  return {
    // 其他原有变量不变
    isPercentage: '',
    discountAmount: 0
  }
}

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