北陌
北陌
  • 发布:2022-09-28 22:48
  • 更新:2022-12-31 16:59
  • 阅读:260

【报Bug】页面data数据更新,已加载的页面内容会重新渲染

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10- 21H2

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

浏览器平台: Chrome

浏览器版本: 103.0.5060.134

项目创建方式: HBuilderX

示例代码:
<template>  
    <view style="height: 300px;overflow: scroll;border: 1px solid  red;width: 100%;">  
        <view :test='num'>  
            <view v-for="(item,index) in 30" :key='index'  
                style="height: 50px;color: #fff;display: flex;align-items: center;justify-content: center;"  
                :style="{backgroundColor:getColor()}">  
                {{index}}  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  

        data() {  
            return {  
                num: 0  
            };  
        },  
        created() {  
            setInterval(() => {  
                this.num = this.num + 10  
            }, 1500)  
        },  
        methods: {  
            getColor() {  
                console.log('颜色赋值了');  
                let R = Math.floor(Math.random() * 255);  
                let G = Math.floor(Math.random() * 255);  
                let B = Math.floor(Math.random() * 255);  
                return 'rgb(' + R + ',' + G + ',' + B + ')'  
            }  
        }  

    }  
</script>  

<style>  

</style>  

操作步骤:
<template>  
    <view style="height: 300px;overflow: scroll;border: 1px solid  red;width: 100%;">  
        <view :test='num'>  
            <view v-for="(item,index) in 30" :key='index'  
                style="height: 50px;color: #fff;display: flex;align-items: center;justify-content: center;"  
                :style="{backgroundColor:getColor()}">  
                {{index}}  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  

        data() {  
            return {  
                num: 0  
            };  
        },  
        created() {  
            setInterval(() => {  
                this.num = this.num + 10  
            }, 1500)  
        },  
        methods: {  
            getColor() {  
                console.log('颜色赋值了');  
                let R = Math.floor(Math.random() * 255);  
                let G = Math.floor(Math.random() * 255);  
                let B = Math.floor(Math.random() * 255);  
                return 'rgb(' + R + ',' + G + ',' + B + ')'  
            }  
        }  

    }  
</script>  

<style>  

</style>  

预期结果:

定时器不会再引起getColor方法

实际结果:

定时器会触发getColor方法

bug描述:

定时器开始更新值,页面的会重新渲染,去触发样式的getColor()方法。

但vue2模式,如果把定时器放再组件内,不会触发插槽内的getColor,vue3,即使组件内也会一直触发。

2022-09-28 22:48 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

是 vue 的问题 demo

要回复问题请先登录注册