javascript – 如何只触发一次vue方法,而不是每次都触发一次

即使在变化时我也在处理旋转：

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate = 0
  },methods: {
    handleRotate () {
      this.rotate = this.rotate + this.getRotateAngle(e.clientX,e.clientY)
    }
  }
}
</script>

现在,第二个this.rotate会在每次更改时运行.我该怎么做才能使第二次this.rotate仅在第一次运行handleRotate时应用？

解决方法

解决方式Vue方式：

您可以使用$once,它只会监听一次事件.

Listen for a custom event,but only once. The listener will be removed once it triggers for the first time.

你只需要将@once添加到@change,如下所示：

<div @change.once="handleRotate"></div>
<script>
export default {
  //No Change here
}
</script>

检查演示是否在fiddle中.

旧答案：

如果您不想为旋转设置初始值,则可以再增加一个变量：hasRotated以跟踪旋转是否已更改.最初将hasRotated设置为true,一旦旋转已更改,将hasRotated设置为false,如下所示：

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate: 123,hasRotated: false
  },methods: {
    handleRotate () {
      if(this.hasRotated){
        this.rotate = this.rotate + this.getRotateAngle(e.clientX,e.clientY)
        this.hasRotated = false
      }
    }
  }
}
</script>