Vue.js中访问顶层属性触发Axios无限循环的问题及解决方法

问题根源 #

你的代码陷入无限循环的核心原因是：

• 模板里的:call-api="getSingleItem(n)"是动态绑定属性，Vue每次组件渲染时都会执行这个方法
• getSingleItem方法会修改jsonData，触发组件重新渲染，进而再次调用该方法，形成无限循环
• 移除{{ jsonData }}后，组件不会因jsonData变化而重新渲染，循环终止，但这只是回避问题而非解决

修复方案 #

把接口调用逻辑从模板动态属性中移出，放到组件生命周期钩子中执行，同时调整模板渲染逻辑，确保只在必要时触发数据更新。

修改后的完整代码 #

<body>
    <div id="app">
        <!-- 直接遍历jsonData渲染对应数据，不再通过动态属性调用方法 -->
        <div v-for="item in jsonData" :key="item.itemId">
            {{ item.data }}
        </div>
    </div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    jsonData: []
                }
            },
            methods: {
                async getSingleItem(itemId) {
                    // 替换await+then的混用写法，用try/catch更清晰
                    try {
                        const response = await axios.get(`https://dummyjson.com/users/${itemId}`);
                        const output = response.data;
                        
                        // 简化存在性判断逻辑
                        const entryIndex = _.findIndex(this.jsonData, { itemId });
                        if (entryIndex === -1) {
                            this.jsonData.push({ itemId, data: output });
                        } else {
                            this.jsonData.splice(entryIndex, 1, { itemId, data: output });
                        }
                    } catch (error) {
                        console.log(error);
                    }
                },
            },
            // 在组件挂载完成后批量调用接口，仅执行一次
            async mounted() {
                for (let n = 1; n <= 5; n++) {
                    await this.getSingleItem(n);
                }
            }
        }).mount('#app')
    </script>
</body>

关键修改点说明 #

1. 移除模板中的动态属性调用：不再通过:call-api="getSingleItem(n)"触发接口请求，避免渲染时重复执行方法
2. 将接口调用移至mounted钩子：组件挂载完成后仅执行一次批量请求，从根源上消除循环触发的可能
3. 优化方法内部逻辑：
   • 用try/catch替代await与.then()的混用，代码更简洁易读
   • 修复output未声明导致的全局变量问题
   • 用_.findIndex一次判断并获取索引，减少lodash方法调用次数
4. 保留jsonData顶层属性：依然可以通过this.jsonData访问和修改接口返回结果，满足需求

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