Nuxt.js 3中setInterval异常与组件切换失效问题求助

核心问题分析 #

1. SSR环境下定时器重复触发：Nuxt 3默认采用SSR渲染，原代码里的setInterval会在服务端和客户端同时执行，导致定时器多次触发，干扰组件渲染逻辑。
2. 组件切换的响应式触发问题：虽然修改ref的值理论上会触发响应式更新，但直接在模板中用条件判断绑定组件对象，可能在部分场景下更新不及时。

修正后的代码 #

<template>
    <div id="main">
        <component :is="currentComponent" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import cards from '~~/components/cards/cards.vue';
import zendesk from '~~/components/zendesk.vue';

// 组件列表，方便后续扩展
const componentList = [cards, zendesk];
// 当前显示的组件
const currentComponent = ref(componentList[0]);
// 定时器ID，用于后续清理
let intervalId: NodeJS.Timeout | null = null;
// 切换间隔（毫秒）
const switchTime = 2 * 1000;

onMounted(() => {
    // 仅在客户端挂载后启动定时器，避免SSR重复执行
    intervalId = setInterval(() => {
        // 计算下一个组件的索引，循环切换
        const currentIndex = componentList.indexOf(currentComponent.value);
        const nextIndex = (currentIndex + 1) % componentList.length;
        currentComponent.value = componentList[nextIndex];
    }, switchTime);
});

onUnmounted(() => {
    // 组件卸载时清理定时器，防止内存泄漏
    if (intervalId) {
        clearInterval(intervalId);
    }
});
</script>

关键改进点 #

• 客户端专属执行：用onMounted包裹定时器，确保只在浏览器环境中启动，彻底解决服务端执行导致的重复触发问题。
• 直观的组件绑定：直接维护currentComponent响应式变量，模板直接绑定该变量，确保响应式更新能准确触发组件切换。
• 定时器清理：在onUnmounted中清除定时器，避免组件卸载后定时器持续运行造成内存泄漏。
• 可扩展性：用数组管理组件列表，后续新增组件只需往数组中添加即可，无需修改切换逻辑。

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