<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>
- 发布:2022-09-28 22:48
- 更新:2022-12-31 16:59
- 阅读:260
产品分类: 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方法
实际结果:
定时器会触发getColor方法
定时器会触发getColor方法
bug描述:
定时器开始更新值,页面的会重新渲染,去触发样式的getColor()方法。
但vue2模式,如果把定时器放再组件内,不会触发插槽内的getColor,vue3,即使组件内也会一直触发。
1 个回复
YUANRJ
是 vue 的问题 demo