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

Question

我正在处理 change 的旋转：

<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，它会监听一个事件，但只会监听一次。

监听自定义事件，但只监听一次。监听器在第一次触发时会被移除。

您只需将.once 添加到@change，如下所示：

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

如果这在fiddle 中，请检查演示。

---

旧答案：

如果您不想为rotate 设置初始值，您可以再设置一个变量：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>

Answer 2

一个简单的解决方案是添加一个类似这样的标记：

<script>
export default {
  data: {
    rotate = 0
  },
  methods: {
    handleRotate () {
      if(!this.rotated){
          this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
          this.rotated = true;
      }
    }
  }
}
</script>

当然你需要将 this.rotated 设置为 false

Answer 3

如果rotate 总是从零开始，你可以这样做：

export default {
    data: {
        rotate = 0
    },
    methods: {
        handleRotate(e) {
            if (this.rotate !== 0) {
                return;
            }
            this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
        }
    }
};