Vue多层数据结构响应式失效,视图更新失败问题

在表单设计和流程设计时，碰到多层数据响应式失效问题，当时也是一脸懵，找不到错在哪里，运行代码不报错，就是不能响应式更新视图了。

特此记录一下填坑过程。

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响应式的数据规范，避免踩坑，否则将失去响应式的后果。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。