<UserComponent :xxx="fn()" /> 导致 uni-app 递归调用 fn

<UserComponent :xxx="fn()" /> 导致 uni-app 递归调用 fn

开发环境 版本号 项目创建方式
Windows 21H2 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：21H2

HBuilderX类型：正式

HBuilderX版本号：4.66

第三方开发者工具版本号：1.06.2503300

基础库版本号：3.8.11

项目创建方式：HBuilderX

### 示例代码：

```javascript
<UserComponent :xxx="fn()">
  <view>{{data.aaa}}</view>
</UserComponent>
<script setup>
import { computed, inject, onMounted, reactive, ref } from 'vue'
const data = ref({})

function RUN(num){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(1);
            resolve(1);
        },1000)
    })
}

function fn(){
  // 不使用 RUN  触发最大递归更新次数 错误  
  // 避免无限调用方式 :xxx="fn()"          fn() 改为 fn 或 ()=>fn()  
  // 不更新数据 / 更新的数据 不绑定在 html 中  
  RUN().then(reg=>{
    data.value = {aaa:111}
  })
}
</script>

操作步骤：

…

预期结果：

渲染完成后调用一次

实际结果：

递归调用

bug描述：

组件绑定带参数方法 且方法更新了绑定数据 数据绑定在视图中 会触发 递归调用


更多关于<UserComponent :xxx="fn()" /> 导致 uni-app 递归调用 fn的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hx升级到最新版本试试还有没有这个问题

更多关于<UserComponent :xxx="fn()" /> 导致 uni-app 递归调用 fn的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为在 Vue 模板中直接调用函数 :xxx="fn()" 会导致每次组件渲染时都会执行该函数，从而形成递归调用循环。

具体分析：

  1. :xxx="fn()" 在每次组件渲染时都会调用 fn() 函数
  2. fn() 中通过 RUN().then() 异步更新了 data.value
  3. 数据更新触发组件重新渲染
  4. 重新渲染时再次执行 fn()，形成无限循环

解决方案： 将 :xxx="fn()" 改为以下任一方式：

// 方式1：传递函数引用
<UserComponent :xxx="fn">

// 方式2：使用箭头函数
<UserComponent :xxx="() => fn()">

这样函数只会在需要时执行，而不是在每次渲染时都自动执行。同时建议将数据初始化逻辑移到 onMounted 生命周期中，确保只在组件挂载后执行一次：

onMounted(() => {
  RUN().then(reg => {
    data.value = {aaa:111}
  })
})
回到顶部