热门搜索列表怎么实现自动轮播切换？

Prog.东宁提问于 2026-03-29 14:10:15 阅读 16

交互

我做了一个热门搜索的模块，想让它每隔3秒自动切换显示不同的关键词，但试了几次都没成功。用的是Vue3 + Composition API。

现在数据是静态的数组，渲染没问题，但加了setInterval之后组件卸载时没清理，还报内存泄漏警告。下面是我写的逻辑：

import { ref, onMounted, onUnmounted } from 'vue'

const hotKeywords = ['前端面试', 'Vue3教程', 'React性能优化', 'TypeScript入门', 'Tailwind实战']
const currentIndex = ref(0)

onMounted(() => {
  setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % hotKeywords.length
  }, 3000)
})

怎么正确地启动和清除这个定时器啊？感觉漏了啥关键步骤。

我来解答赞 4 收藏

反馈

1 条解答

Mr-统元 Lv1

我之前也遇到过，确实要记得清理定时器。把setInterval返回的id存起来，在onUnmounted里clearInterval就行。改完代码长这样：

import { ref, onMounted, onUnmounted } from 'vue'

const hotKeywords = ['前端面试', 'Vue3教程', 'React性能优化', 'TypeScript入门', 'Tailwind实战']

const currentIndex = ref(0)

let timerId

onMounted(() => {

  timerId = setInterval(() => {

    currentIndex.value = (currentIndex.value + 1) % hotKeywords.length

  }, 3000)

})

onUnmounted(() => {

  clearInterval(timerId)

})

这样就不会内存泄漏了，搞定收工。

2026-03-29 14:11