Vue计数器增减函数异常：count值无论操作均+2问题排查

嘿，我帮你找到了这个count值异常的问题根源，主要有几个关键点：

1. 致命的变量名冲突：定时器ID覆盖了count数据 #

你在increaseLife和decreaseLife方法里犯了一个典型的错误——把setTimeout返回的定时器ID赋值给了this.count，而this.count本来是用来记录计数的data属性！

看这段代码：

// increaseLife方法里
this.count = setTimeout(() => { this.countClear() }, 1000)
// decreaseLife方法里同样有这段

setTimeout会返回一个数字类型的定时器ID，当你执行完this.count++或this.count--后，立刻把这个ID赋值给this.count，直接覆盖了刚修改的计数。等到1秒后countClear执行this.count = 0，整个数值逻辑就彻底混乱了，最终表现为count每次都莫名其妙加2。

2. 初始数据类型错误 #

你的data里count: '0'是字符串类型，虽然JavaScript会自动帮你转成数字做加减，但结合上面的定时器ID覆盖问题，类型混乱会让数值异常更难追踪。建议把所有数值类型的初始值都设为数字，比如count: 0、life: 20。

3. 模板里的冗余方法调用（额外触发count增加） #

看加号按钮的绑定：

<button @click="increaseLife(); increaseCount()">+</button>

你同时调用了increaseLife()和increaseCount()，但你的methods里根本没定义increaseCount方法——不过就算是笔误（比如本来想写count++），increaseLife里已经有this.count++了，这会导致count被多增加一次，也是异常的诱因之一。

快速修复方案 #

1. 给定时器单独分配变量：在data里新增一个countTimer: null，替换所有用到this.count的定时器操作：

   // 在increaseLife和decreaseLife里修改
   clearTimeout(this.countTimer);
   // ...
   this.countTimer = setTimeout(() => { this.countClear() }, 1000)
   

2. 修正初始数据类型：把data里的count: '0'改成count: 0，life: '20'改成life: 20
3. 移除模板里的冗余方法：把加号按钮的点击事件改成@click="increaseLife()"

这样修改后，count的增减逻辑就能正常工作啦！

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