Vue多层数据结构响应式失效,视图更新失败问题
更新时间：2024年02月29日 09:27:42 作者：布依前端
这篇文章主要介绍了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响应式的数据规范，避免踩坑，否则将失去响应式的后果。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
Vue3新增了Composition API，我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象，这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下2022-12-12
在了解vue的常用的实例方法之前，我们应该先要了解其常用的实例属性，你能了解到的vue实例属性有哪些呢？小编在这里就列举了几个常用的vue实例的属性。大家可以一起参考学习一下2022-08-08
这篇文章主要介绍了vue限制文本框输入数字的正确姿势，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue 获取视频时长的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
本文主要介绍了在Vue中实现动态合计两个字段并输出摘要信息的方法,通过使用监听器和深度监听,确保当数据变化时能正确更新合计结果,具有一定的参考价值,感兴趣的可以了解一下2024-11-11
本文主要介绍了vue实现热力图，结合leaflet.heat插件可以很容易的做出热力图，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
多级联动是一种常见的交互方式,本文主要介绍了elementui实现标签页与菜单栏联动的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
这篇文章主要介绍了Vue axios获取token临时令牌封装案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了解决Vue_localStorage本地存储和本地取值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论