vue 随时开启关闭的定时器

在Vue中开启和关闭定时器可以使用两个生命周期函数：`created`和`beforeDestroy`。在`created`函数中开启定时器，在`beforeDestroy`函数中关闭定时器。

以下是一个示例代码：

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="toggleTimer">{{ isTimerOn ? '关闭' : '开启' }}定时器</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null,
      isTimerOn: false
    };
  },
  created() {
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.count++;
      }, 1000);
      this.isTimerOn = true;
    },
    stopTimer() {
      clearInterval(this.timer);
      this.isTimerOn = false;
    },
    toggleTimer() {
      if (this.isTimerOn) {
        this.stopTimer();
      } else {
        this.startTimer();
      }
    }
  }
};
</script>

在这个示例中，我们使用`setInterval`函数开启一个每秒钟增加计数器的定时器。在`created`函数中调用`startTimer`函数开启定时器，在`beforeDestroy`函数中调用`stopTimer`函数关闭定时器。我们还提供了一个`toggleTimer`函数，当按钮被点击时，它会根据当前定时器的状态开启或关闭定时器。