uni-app 模板函数重复执行无数次

uni-app 模板函数重复执行无数次

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：2.8.11

手机系统：iOS

手机系统版本号：iOS 13.4

手机厂商：苹果

手机机型：iphone 8plus

页面类型：nvue

打包方式：云端

示例代码：

<template>  
    <view class="content">  
        <text>{{test()}}</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                b:0  
            }  
        },  
        methods: {  
            test(){  
                this.b++;  
                return this.b;  
            },  
        }  
    }  
</script>  

<style>  
</style>

操作步骤： 启动app就能出现 b值 无限制+1

预期结果： 显示1

实际结果： 无限制+1

bug描述： 按道理说test 只应该执行一次，实际上执行了无数次


更多关于uni-app 模板函数重复执行无数次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

视频虽然是模拟器的，但是ios也是一样。 示例代码是模拟这个问题的，实际功能比这些复杂。

更多关于uni-app 模板函数重复执行无数次的实战教程也可以访问 https://www.itying.com/category-93-b0.html



请勿这样使用，因为 模板渲染时会执行此方法，执行此方法导致数据变更，数据变更导致模板重新渲染，模板渲染时会执行此方法，执行此方法导致数据变更，数据变更导致模板重新渲染，模板渲染时会执行此方法，执行此方法导致数据变更，数据变更导致模板重新渲染，模板渲染时会执行此方法，执行此方法导致数据变更，数据变更导致模板重新渲染，模板渲染时会执行此方法，执行此方法导致数据变更，数据变更导致模板重新渲染。。。

对，是我代码语法写错了，不是bug

这个问题的原因是你在模板中直接调用了方法(test())，这会导致每次数据变化时都会重新执行该方法。

在uni-app/Vue中，模板中的函数调用会在每次渲染时重新执行。由于你的test()方法会修改data中的b值，这又会触发重新渲染，从而形成无限循环。

解决方案：

  1. 不要在模板中直接调用会修改数据的方法
  2. 将计算结果存储在data中，在created/mounted生命周期中初始化

修改后的代码：

<template>  
    <view class="content">  
        <text>{{b}}</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                b: 0  
            }  
        },  
        mounted() {
            this.b = 1; // 初始化值
        }
    }  
</script>
回到顶部