vue数据变化ui不刷新

1.问题描述
直接修改数组某一项的值，数据变化后ui并不跟着变化

2.解决方案，要用到，数组更新检测
错误的代码

setOptionVal: function (index, val) {
  this.SubjectListData[index].optionIdStringResult = val
}

正确的代码

setOptionVal: function (index, val) {
  let tempVal = this.SubjectListData[index]
  tempVal.optionIdStringResult = val
  this.$set(this.SubjectListData, index, tempVal)
}

3.方案总结，可采取下面三种解决方案：
Vue.set()
Object.assign()
$forceUpdated()

Vue.set()

this.$set(this.item,'newProperty','新值')

Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
比如这样

Object.assign(this.item,{newProperty:'新值'})

应创建一个新的对象，合并原对象和混入对象的属性

this.item = Object.assing({},this.item,{newProperty:'新值'})

$forceUpdate
如果你发现你自己需要在 Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事
$forceUpdate迫使Vue 实例重新渲染
PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

小结
如果为对象添加少量的新属性，可以直接采用Vue.set()
如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)
PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

相关链接：
https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
https://blog.csdn.net/a11979/article/details/122990172

铁血汉子 2019年2月14日

0 3793