Vue3实现视图组件每10秒无限自动切换的技术求助

问题说明 #

你有两个视图组件，原本通过按钮点击切换data中的布尔变量show实现组件切换，现在需要该变量每10秒自动在true/false间无限切换，让页面组件随之切换，纠结于用created钩子的setTimeout还是结合methods循环实现。

现有代码问题 #

• 同时使用了Vue3组合式API的ref和选项式API的data，重复定义show会导致冲突
• setTimeout未设置延时参数，也未实现循环切换逻辑
• toggleShow方法中使用了未定义的showProp，应该操作this.show

推荐实现方案 #

方案1：使用setInterval（最适合无限循环场景） #

在created钩子中用setInterval定时切换show值，简单高效，同时要记得在组件销毁时清除定时器避免内存泄漏。

完整代码：

<template>
  <div v-if="show">
    <span> IF </span>
    <Display />
  </div>
  <div v-else>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Display from './components/Display.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Display
  },
  data() {
    return {
      show: true,
      toggleTimer: null // 存储定时器ID，用于后续清除
    }
  },
  created() {
    // 每10秒切换一次show状态
    this.toggleTimer = setInterval(() => {
      this.show = !this.show
    }, 10000)
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    clearInterval(this.toggleTimer)
  },
  methods: {
    // 保留手动切换方法（可选）
    toggleShow() {
      this.show = !this.show
    }
  }
}
</script>

方案2：递归调用setTimeout #

如果需要灵活控制每次切换的延时（比如后续要调整间隔），可以用递归setTimeout实现：

<template>
  <!-- 模板部分和方案1一致 -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Display from './components/Display.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Display
  },
  data() {
    return {
      show: true,
      toggleTimer: null
    }
  },
  created() {
    this.startAutoToggle()
  },
  beforeUnmount() {
    clearTimeout(this.toggleTimer)
  },
  methods: {
    startAutoToggle() {
      this.toggleTimer = setTimeout(() => {
        this.show = !this.show
        this.startAutoToggle() // 递归调用，实现无限循环
      }, 10000)
    },
    toggleShow() {
      this.show = !this.show
    }
  }
}
</script>

关键提示 #

• 统一API风格：不要同时混用组合式API（ref）和选项式API（data），选一种风格即可，上面代码沿用了你原有的选项式API风格
• 必清定时器：组件销毁时必须清除定时器，否则会导致内存泄漏
• 简化切换逻辑：布尔值切换直接用this.show = !this.show即可，无需冗余的if-else判断

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