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函数式组件的应用实例详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家介绍了Vuepress使用vue组件实现页面改造示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
Vuex处理用户Token过期及优化设置封装本地存储操作模块
这篇文章主要为大家介绍了Vuex处理用户Token优化设置封装本地存储操作模块及Token 过期问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器,在BSD-like 协议下发行,下面这篇文章主要给大家介绍了关于ubuntu中利用nginx部署vue项目的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了详解vuex之store源码简单解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue之Computed依赖收集与更新原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下2017-06-06
三分钟让你快速学会axios在vue项目中的基本用法(推荐!)
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了如何通过三分钟让你快速学会axios在vue项目中的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论