uni-app Vue3 App端 改变:style绑定对象的属性值不会重新渲染元素样式

uni-app Vue3 App端 改变:style绑定对象的属性值不会重新渲染元素样式

开发环境 版本号 项目创建方式
Windows 10 专业版 4.75 HBuilderX

示例代码：

<template>  
<view>  
    <view :style="viewStyle">{{viewStyle.backgroundColor}}</view>  
    <button @click="handleChangeColor">改变颜色</button>  
</view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            viewStyle: {backgroundColor: '#0f0'}  
        }  
    },  
    methods: {  
        handleChangeColor() {  
            this.viewStyle.backgroundColor = '#00f'  
        }  
    }  
}  
</script>

操作步骤：

把上述代码放到一个page中，选Vue3，在Android App基座中运行

预期结果：

view中文字和它的背景颜色都改变

实际结果：

view中的文字改变了，但它的背景颜色没变

bug描述：

修改:style绑定对象的属性值，那个值确实改变了，把它放到{{}}中能看到变化，但是元素的样式没跟着重新渲染(如果整个替换:style绑定的对象，可以让样式重新渲染)。 这个问题只出现在Vue3 App端。换成Vue2就没问题，换成web端也没问题。更改:class绑定的对象的属性也没有问题。


更多关于uni-app Vue3 App端 改变:style绑定对象的属性值不会重新渲染元素样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以尝试把viewStyle放到computed去触发，这样可以渲染出来的。

更多关于uni-app Vue3 App端 改变:style绑定对象的属性值不会重新渲染元素样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


放到computed里相当于整个替换对象，这样确实可以渲染出来，只是替换对象中的属性渲染不出来。 这与Web端或Vue2的行为不一致，没有实现Vue文档中的功能，所以应该是一个bug。

这是一个Vue3响应式系统在uni-app App端的兼容性问题。在Vue3中，使用reactive()创建的对象在直接修改其属性时，虽然数据确实变化了，但有时无法正确触发DOM更新。

解决方案：

  1. 重新赋值整个对象（推荐）：
handleChangeColor() {
    this.viewStyle = {
        ...this.viewStyle,
        backgroundColor: '#00f'
    }
}
  1. 使用Vue3的响应式方法：
import { reactive } from 'vue'

export default {
    setup() {
        const viewStyle = reactive({backgroundColor: '#0f0'})
        
        const handleChangeColor = () => {
            viewStyle.backgroundColor = '#00f'
        }
        
        return {
            viewStyle,
            handleChangeColor
        }
    }
}
  1. 使用ref包装对象：
data() {
    return {
        viewStyle: ref({backgroundColor: '#0f0'})
    }
},
methods: {
    handleChangeColor() {
        this.viewStyle.value.backgroundColor = '#00f'
    }
}
回到顶部