VueJS疑问：为何后置自增无法让计数器递增，前置自增却可行？

这是个很常见的JavaScript运算符逻辑误区，我来给你掰明白其中的道理：

问题核心：后置自增运算符的执行顺序 #

你写的this.counter = this.counter++;其实是个无效操作，原因在于后置自增（x++）的工作机制：

• 第一步：先读取this.counter的当前值（比如初始是0）
• 第二步：把这个原始值作为整个表达式的返回结果
• 第三步：再将this.counter的值加1（此时它会变成1）
• 第四步：但你又把表达式返回的原始值（0）重新赋值给this.counter，等于把刚加的1又覆盖回0了！

而前置自增（++x）就不一样：

• 第一步：先把this.counter的值加1（从0变1）
• 第二步：把这个新值作为表达式的返回结果
• 第三步：赋值回this.counter，结果自然是正确的1

更简洁的正确写法 #

其实你根本不需要额外赋值，自增运算符本身就会直接修改变量的值，所以直接写：

increment: function(){
  this.counter++;
}

或者用更直观的加法：

increment: function(){
  this.counter += 1;
}

都能正常实现计数器递增。

你的原始代码参考 #

HTML部分

<div id="app"> 
  <h2>some text</h2> 
  <p>{{ counter }}</p> 
  <button @click="increment">Increment</button> 
</div>

VueJS部分

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  methods: {
    increment: function(){
      this.counter = this.counter++; // 这里是问题所在
    }
  }
})

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