使用setInterval实现mytime每5秒加10出现异常序列问题求助

哈哈，这个问题我太熟悉了！你遇到的是Vue模板渲染机制和定时器创建时机的坑，咱们一步步来拆解：

为什么会出现1→11→31→71…的异常序列？ #

看你的代码片段，应该是在aaa()方法里创建了setInterval，然后直接在模板里用{{ aaa() }}调用这个方法。这里的核心问题是：

• Vue的模板渲染机制是响应式的：当mytime变化时，组件会自动重新渲染，重新渲染时会再次执行aaa()方法。
• 每次执行aaa()都会新建一个setInterval定时器，而且之前的定时器并没有被清除，会一直运行。

这样一来，定时器的数量会越来越多：

1. 第一次渲染：创建1个定时器，5秒后mytime加10 → 11
2. mytime变成11触发第二次渲染：又创建1个定时器，现在有2个定时器同时运行，5秒后每个定时器都给mytime加10 → 11+20=31
3. 后续mytime每次变化都会触发新的渲染，新增更多定时器，最终mytime的增长数值会随着定时器数量的翻倍而翻倍，就出现了你看到的异常序列。

正确的实现方式 #

要解决这个问题，我们需要只创建一次定时器，并且不在模板中调用有副作用的方法（比如创建定时器）。具体做法如下：

步骤1：修改模板，直接显示响应式数据 #

把模板里的{{ aaa() }}改成直接显示mytime，避免每次渲染都执行有副作用的方法：

<div id="app-6">
  {{ mytime }}
</div>

步骤2：在生命周期钩子中创建/清除定时器 #

把定时器的创建逻辑放到Vue的mounted钩子中（组件挂载后只执行一次），同时在beforeDestroy钩子中清除定时器，避免内存泄漏：

var app6 = new Vue({
  el: '#app-6',
  data: {
    mytime: 1,
    timer: null // 存储定时器ID，用于后续清除
  },
  mounted() {
    // 组件挂载后只创建一次定时器
    this.timer = setInterval(() => {
      this.mytime += 10
    }, 5000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，防止内存泄漏
    clearInterval(this.timer)
  }
})

这样修改后，定时器只会创建一次，每5秒给mytime加10，就能得到你预期的1、11、21、31…的序列啦！

内容的提问来源于stack exchange，提问作者zephyr.mao