在表单设计和流程设计时,碰到多层数据响应式失效问题,当时也是一脸懵,找不到错在哪里,运行代码不报错,就是不能响应式更新视图了。特此记录一下填坑过程。
1、 数据初始化结构被破坏
表单配置需要config属性,初始化时对象里没有,导致vue响应式失效,因为在页面完成渲染之后,vue就已经完成了响应式绑定,对于监听且没有属性的字段将会失去数据的响应式,从而无法实时更新视图。先看看这个对象,是修复之前的结构。
formDesign: {
process:{},
list: []
}
修复后的数据结构,每一个需要响应式的属性,初始化页面时都需要正确的结构。否则将失去响应式的后果。
formDesign: {
process:{},
list: [],
config: {}
}
2、js-delete删除未触发数据更新
在调用js删除vue的data的数据后,既是传入组件的data绑定sync属性和watch监听都将变成徒劳的,因为js的delete更新不是链式响应式的,不会触发vue的响应式数据驱动更新视图。当然这里针对是多层次数据结构,尤其是在流程设计,递归展示视图和操作数据时最为常见。
解决办法:使用vue的Vue.delete( target, propertyName/index )
官方解释:删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制,但是你应该很少会使用它。
官方解释—深层响应性
在 Vue 中,状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组,你的改动也能被检测到。你也可以直接创建一个浅层响应式对象。它们仅在顶层具有响应性,一般仅在某些特殊场景中需要。
export default {
data() {
return {
obj: {
nested: { count: 0 },
arr: ['foo', 'bar']
}
}
},
methods: {
mutateDeeply() {
// 以下都会按照期望工作
this.obj.nested.count++
this.obj.arr.push('baz')
}
}
}
总结:每一个需要响应式的属性,初始化页面时都需要正确的data结构,不管数据结构是否复杂,都应该保持Vue响应式的数据规范,避免踩坑,否则将失去响应式的后果。