javascript - 如何只触发一次 vue 方法，而不是每次

Question

即使在更改时我也在处理轮换:

<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 在每个 change 上运行。我该怎么做才能使第二个 this.rotate 仅在第一次 handleRotate 运行时应用？

Answer 1

用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 中.

---

旧答案:

如果您不想为 rotate 设置初始值，您可以再设置一个变量:hasRotated 来跟踪 rotate 是否已更改。最初将 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>