Vue中如何有效重新赋值data对象，使其改变而非无效？

本文共计1078个文字，预计阅读时间需要5分钟。

在Vue中，有一个常见的问题与data中的属性对象初始化有关。假设在初始化时，data中的属性对象被设置为 `{}`，那么之后在方法中使用普通JS语法赋值将不会生效。例如，这里是在data中：

javascriptdata() { return { data: {}, };}

而在这个方法中：

javascriptafterU() { this.data=data(this); // 这里的赋值是无效的}

这是因为在Vue中，data中的对象是通过引用赋值的，所以直接修改对象内部的属性是有效的。但如果直接重新赋值一个新对象，那么它不会更新DOM。正确的方法是修改对象内部的具体属性，而不是整个对象。

vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{}，那么后面在方法用普通的js语法赋值会无效

这里是data

data() { return { model: {} }; }

这里是方法里的普通赋值

afterUpload(response) { this.model.icon = response.url; }

普通方法会无效，需要使用vue提供的方法重新显示声明

afterUpload(response) { this.$set(this.model,'icon',response.url) }

补充知识：Vue.js - 数组和对象的赋值动态变化 & 克隆

这篇文章主要介绍了 vue 数组和对象不能直接赋值动态变化 & 克隆情况和解决方法，需要的朋友可以参考下。