Vue.js实现power值100-0-100循环功能求助

核心问题分析 #

原代码的watch逻辑存在两个关键问题：

1. 条件判断逻辑错误：当power减到0后执行递增，变成1时，第一个if (value == 100 || value > 0)会触发递减操作，导致数值在0和1之间反复跳动，无法完成从0到100的递增循环。
2. 缺少方向控制：没有明确标记当前是「递减阶段」还是「递增阶段」，无法稳定维持单向的数值变化。

修复后的完整代码 #

export default {
  data() {
    return {
      power: 100,
      isRunning: true, // 控制计量器是否运行
      isDecreasing: true, // 标记当前变化方向：true=递减，false=递增
      timerId: null // 存储定时器ID，用于停止计时
    };
  },
  methods: {
    toggleRunning() {
      this.isRunning = !this.isRunning;
      if (this.isRunning) {
        // 重新启动时继续当前方向的变化
        this.updatePower();
      } else {
        // 停止时清除定时器
        clearTimeout(this.timerId);
      }
    },
    updatePower() {
      if (!this.isRunning) return;
      
      if (this.isDecreasing) {
        this.power--;
        // 递减到0时切换为递增方向
        if (this.power === 0) {
          this.isDecreasing = false;
        }
      } else {
        this.power++;
        // 递增到100时切换为递减方向
        if (this.power === 100) {
          this.isDecreasing = true;
        }
      }
      
      // 递归调用维持循环
      this.timerId = setTimeout(() => {
        this.updatePower();
      }, 100);
    }
  },
  mounted() {
    // 页面加载后启动计量器
    this.updatePower();
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，避免内存泄漏
    clearTimeout(this.timerId);
  }
}

关键改进点 #

• 添加isDecreasing变量明确控制数值变化方向，避免逻辑冲突
• 使用isRunning变量结合toggleRunning方法实现启停控制，点击按钮即可暂停在当前值
• 用递归调用的updatePower方法替代watch监听，逻辑更清晰，避免watch触发的重复执行问题
• 增加定时器ID的管理，组件销毁时清除定时器，防止内存泄漏

模板部分示例 #

如果需要配合按钮控制，在模板中添加：

<template>
  <div>
    <p>当前功率：{{ power }}</p>
    <button @click="toggleRunning">
      {{ isRunning ? '停止' : '启动' }}
    </button>
  </div>
</template>

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