Vue.js数据更新不显示问题：实现3秒倒计时组件

正确实现代码 #

<template>
  <div class="game-start">
    <h1 @click="startTimer">{{ timerText }}</h1>
  </div>
</template>

<script>
export default {
  name: 'GameStart',
  data() {
    return {
      timerText: 'Start',
      countdownTimer: null
    }
  },
  methods: {
    startTimer() {
      let count = 3;
      // 初始化显示第一个数字
      this.timerText = count.toString();
      
      this.countdownTimer = setInterval(() => {
        count--;
        if (count > 0) {
          this.timerText = count.toString();
        } else {
          // 倒计时结束，执行游戏启动逻辑
          this.timerText = 'Go!';
          clearInterval(this.countdownTimer);
          // 这里可以添加跳转游戏页面或初始化游戏的代码
          // 例如：this.$router.push('/game')
        }
      }, 1000);
    }
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  }
}
</script>

问题原因分析 #

你遇到的页面不更新问题，大概率是因为用了同步阻塞式的循环写法（比如for循环配合sleep、while等待）。这种写法会卡住JavaScript主线程，而Vue的DOM更新是异步队列处理的——主线程被阻塞时，DOM更新请求会一直排队，直到循环结束，所以页面只会直接显示最后结果，看不到3→2→1的逐步变化。

改用setInterval或递归setTimeout的异步方式，每次间隔1秒更新timerText，Vue就能正常触发响应式更新，页面会实时渲染变化后的内容。

另一种递归setTimeout实现方式 #

如果你更倾向于递归写法，也可以这样实现：

startTimer() {
  let count = 3;
  let timeoutId = null;
  
  const updateCount = () => {
    if (count >= 0) {
      this.timerText = count > 0 ? count.toString() : 'Go!';
      count--;
      timeoutId = setTimeout(updateCount, 1000);
    }
  };
  
  updateCount();
  
  // 可以把timeoutId存在data里，在beforeUnmount时清除
  this.countdownTimer = timeoutId;
}

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