vue中修改数据页面不更新的原因-解决方案

Posted 2021-09-14 JackieDYH

在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新

解决

一 

Vue.set()
Vue.set( target, propertyName/index, value )
或
this.$set(target, propertyName/index, value)
参数：
target：要修改的对象或数组
propertyName/index：属性或下标
value：修改后的value值

二 

Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
应创建一个新的对象，合并原对象和混入对象的属性

三 

$forceUpdate
$forceUpdate迫使Vue 实例重新渲染

四 

自定义重置方法
把需要重置的data数据全部写在一个方法里，进到页面调用此方法即可

JSON.parse(JSON.stringify(data))