Vue 仅触发一次方法：避免重复执行的终极指南

2024-03-14 17:57:01

仅触发一次 Vue 方法：避免反复执行

介绍

在 Vue 中，与元素事件关联的方法会在事件触发时执行。然而，在某些情况下，我们希望某个方法仅在事件的首次触发时执行，而不是每次都执行。本文将探讨几种在 Vue 中仅触发一次方法的方法。

方法 1：使用 v-once 指令

v-once 指令可确保一个元素及其内容只被渲染一次。通过在方法调用的元素上使用 v-once 指令，它将仅在事件的首次触发时执行。

示例：

<div @change="handleRotate" v-once></div>

方法 2：使用 computed 属性

computed 属性仅在初始化时计算，并且只有在依赖项发生更改时才会重新计算。我们可以创建一个只在事件第一次触发时计算的计算属性，并将方法调用放在 computed 属性中。

示例：

export default {
  computed: {
    rotateAngle() {
      if (!this._rotateInitiated) {
        // 第一次触发时计算旋转角度
        this._rotateInitiated = true
        return this.getRotateAngle(e.clientX, e.clientY)
      }
      return this._rotateAngle // 在后续触发时返回先前计算的角度
    }
  },
  methods: {
    handleRotate() {
      // 将计算的角度应用于 rotate 数据
      this.rotate += this.rotateAngle
    }
  },
  data: {
    rotate: 0,
    _rotateInitiated: false // 标识是否已初始化旋转角度
  }
}

方法 3：使用 beforeMount 生命周期钩子

beforeMount 生命周期钩子在组件被挂载到 DOM 之前调用。通过在 beforeMount 钩子中执行一次性操作，我们可以确保方法仅在事件的首次触发时执行。

示例：

export default {
  beforeMount() {
    // 第一次触发时计算旋转角度
    this.rotate = this.getRotateAngle(e.clientX, e.clientY)
  },
  methods: {
    handleRotate() {
      // 在后续触发时不执行任何操作
    }
  }
}