Vue中watch触发无限循环及Buy方法自动执行问题求助

嘿，刚上手Vue就碰到这几个棘手的问题，我太懂那种摸不着头脑的感觉了！咱们一步步拆解，逐个解决：

1. 先搞定Buy方法自动触发的问题 #

这大概率是触发了模板自动执行方法或者生命周期钩子误调用：

• 检查模板中的按钮绑定：如果你写的是 <button @click="Buy()"> 其实点击事件没问题，但如果是在其他指令（比如v-if、v-bind）里写了Buy()，页面渲染时就会自动执行这个方法。比如：

  <!-- 错误示例：v-if里调用方法会自动执行 -->
  <div v-if="Buy()">...</div>
  

  正确的事件绑定应该是 <button @click="Buy"> 或者 <button @click="Buy()">（点击事件里两种写法都可，但其他指令里绝对不能加括号调用）。
• 检查生命周期钩子：看看created、mounted里是不是不小心写了this.Buy()，初始化时就触发了方法。
• 检查data初始化：有没有在定义data属性时调用了Buy方法，比如subTotal: this.Buy()，这也会导致页面加载就执行。

2. 解决watch无限循环的问题 #

无限循环的核心原因是：你在watch的回调函数里修改了被监听的变量（或者该变量的依赖项），导致watch再次触发，形成闭环：

• 先看你的watch代码，比如如果是这样写的就会循环：

  watch: {
    subTotal(newVal) {
      // 这里修改了被监听的subTotal，会再次触发watch
      this.subTotal = newVal + 1;
    }
  }
  

• 如果watch的是数组/对象，还要检查是不是深度监听后，在回调里修改了数组/对象的属性，比如：

  watch: {
    cartItems: {
      deep: true,
      handler(newVal) {
        // 修改了cartItems的元素，会再次触发深度监听
        newVal.forEach(item => item.quantity += 1);
      }
    }
  }
  

• 另外，如果你的Buy方法里修改了watch监听的变量，而watch回调里又调用了Buy方法，也会形成循环：比如watch监听subTotal，回调里调用this.Buy()，而Buy方法又更新subTotal，无限往复。

3. 修复SubTotal的浮点数精度问题 #

这个是JavaScript的经典坑：二进制无法精确表示部分十进制小数（比如0.1、0.3），导致乘法/加法后出现超长小数。解决方法有两种：

• 转成整数运算（推荐，避免精度丢失）：把金额单位从“元”转成“分”，计算完再转回“元”：

  // 假设price是单价，quantity是数量
  const totalInCents = parseInt(this.price * 100) * this.quantity;
  this.subTotal = totalInCents / 100;
  

• 用toFixed()保留小数位数：适合只需要展示固定小数位的场景，注意toFixed返回的是字符串，需要转成数字：

  this.subTotal = +(this.price * this.quantity).toFixed(2);
  

按这几个方向排查，应该能快速定位到问题所在～

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