如何使用Vue.js结合setInterval实现两张图片每3秒自动交替切换

问题原因 #

你的代码无法持续交替的核心问题是setInterval的回调逻辑仅做了单向赋值：第一次3秒触发后把src固定改成mokus.jpg，之后每次触发都重复赋值同一个地址，自然不会有切换效果。同时缺少定时器销毁逻辑，容易引发内存泄漏。

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image changer</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <img :src="src">
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                    // 定义两个需要切换的图片地址常量
                    img1: "farkas.jpg",
                    img2: "mokus.jpg",
                    src: "farkas.jpg",
                    // 存储定时器id，后续用于销毁
                    timerId: null
                }
            },
            methods: {
                callFunction: function() {
                    this.timerId = setInterval(() => {
                        // 判断当前图片地址，做双向切换
                        this.src = this.src === this.img1 ? this.img2 : this.img1
                    }, 3000);
                }
            },
            mounted () {
                this.callFunction()
            },
            // 组件卸载前清理定时器，避免内存泄漏
            beforeUnmount() {
                if(this.timerId) {
                    clearInterval(this.timerId)
                }
            }
        })
        const vm = app.mount('#app')
    </script>
</body>
</html>

核心修改说明 #

• data中新增了两个图片地址的固定变量，以及用于存储定时器id的字段，方便后续逻辑判断和资源清理
• 定时器回调中增加了三元判断：如果当前src是第一张图就切第二张，反之切第一张，实现持续交替效果
• 新增beforeUnmount生命周期钩子，组件销毁时主动清除定时器，避免不必要的性能损耗

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