vue给对象动态添加属性后，页面不动态更新的问题

TheobaldWong

于 2020-12-31 00:57:57 发布

阅读量1.9k

点赞数 2

文章标签： vue uni-app

本文链接：https://blog.youkuaiyun.com/TheobaldWong/article/details/112001268

版权

本文探讨了Vue中数据对象属性添加后页面未更新的问题，介绍了四种解决方法：Vue.set(), $set(), 使用Object.assign()创建新对象，以及$forceUpdate()的谨慎使用。重点在于如何确保Vue组件视图实时响应数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在vue页面data中初始化一个对象，后通过代码给对象添加一个属性，后发现数据对象中添加成功并且可以改变，但页面没有进行更新。

原因所在

解决方式：

一、利用Vue.set(object,key,val)

例如：Vue.set(vm.obj,'k1','v1')

二、利用this.$set(this.obj,key,val)，这是Vue.set()的全局实例

例如：this.$set(this.obj,'k1','v1')

三、利用Object.assign({}，this.obj)创建新对象

例如：

this.obj.k1='v1'；
this.obj = Object.assign({}, this.obj)

// 或者下面这种

this.obj = Object.assign({}, this.obj,{'k1','v1'})

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

四、也可以使用$forceUpdate()进行强制刷新，但是不建议这种方式