Vue使用setInterval时timerValue无法更新问题排查

你的代码存在两个核心问题，导致页面始终显示0：

1. 未在定时器中更新响应式数据timerValue #

你在created钩子中初始化了局部变量seconds并赋值给timerValue，但定时器回调里只对seconds做自增操作，从未将更新后的值同步到timerValue。Vue的视图更新依赖响应式数据的变化，因此页面不会刷新。

2. 定时器回调的this指向错误 #

你使用普通function作为setInterval的回调，此时函数内部的this并不指向Vue组件实例，就算尝试在回调里修改this.timerValue，也无法正确访问组件的响应式数据。

修复后的代码 #

<template>
  <div>
    {{ timerValue }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      timerValue: 0
    };
  },
  created() {
    setInterval(() => {
      // 箭头函数会绑定组件实例的this，可直接访问响应式数据
      this.timerValue++;
    }, 1000); // 指定1000毫秒（1秒）的执行间隔，避免无意义的高频执行
  }
};
</script>

额外优化说明 #

• 将timerValue初始值设为数字0而非空字符串，符合数据类型的语义规范。
• 必须给setInterval添加时间间隔参数，否则定时器会以浏览器允许的最快速度执行，造成不必要的性能消耗。

内容的提问来源于stack exchange，提问作者parsecer