vue中this.$set修改数组，数据改变视图层不更新

Posted 2023-02-06

this.$set( target, propertyName/index, value )用法：

1. ​​Object | Array target​​
2. ​​string | number propertyName/index​​
3. ​​any value​​

（官方解释）

• 用法：
  向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = hi)
• 总结：
  1、动态修改的数据必须在data中
  2、修改某属性的值数据改变视图层也改变的条件：该属性初始化必须在该属性所在数据源中或者由this.$set做的新增属性，后面对该属性进行操作才能监听到该属性

demo

obj:
name:"zhangsan",
age:"15"

1. 新增sex属性 ​​this.obj.sex=男​​
2. 通过对象修改sex属性 ​​this.obj.sex=女​​，此时数据改变，视图未更新
3. 通过​​this.$set​​修改​​this.$set(obj,sex,女)​​ ，发现数据改变，视图未更新，与第2.出现相同的现象
4. 原因：​​obj​​中没有​​sex​​属性，​​this.$set(obj,sex,女)​​只能做修改，vue.set( )可以做县呢过，然后对​​obj.sex​​做操作的话才能够监听到​​sex​​，视图层才会更新

相关文章：​​vue.set()与this.$set()的区别​​