vue setTimeout 只执行一次

在Vue.js中，如果你想要在一个定时操作完成后只执行一次，通常可以结合`v-once`指令和自执行函数（IIFE，Immediately Invoked Function Expression）来实现。`v-once`用于标记一个元素仅渲染一次，然后其内容会被替换为HTML字符串并缓存起来。

假设你想在组件里使用setTimeout并在回调中执行一些一次性任务，你可以这样做：

<template>
  <div v-if="!hasExecuted" @someEvent="executeOnce">
    <!-- 元素将在接收到'someEvent'事件触发时第一次执行 -->
    <button @click="triggerTimeout">点击触发延迟操作</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasExecuted: false,
    };
  },
  methods: {
    executeOnce() {
      // 使用立即执行函数确保只执行一次
      (function() {
        setTimeout(() => {
          // 执行你的任务
          this.hasExecuted = true; // 标记已执行
          // 这里放你的异步代码，比如数据请求、DOM更新等
        }, 1000); // 指定延时时间
      })();
    },
    triggerTimeout() {
      this.executeOnce();
    },
  },
};
</script>

在这个例子中，当用户点击按钮时，`executeOnce`方法会被调用，而里面的自执行函数会确保`setTimeout`里的任务只运行一次，因为后续点击事件不会再次触发`executeOnce`。