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中this.$router.push参数获取方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
element-plus提供了uploader组件，但是不好定制化。所以本文将利用Vue3和element-plus实现一个图片上传的组件，感兴趣的可以了解一下2022-03-03
ESLint是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误,这篇文章主要介绍了Vue CLI项目迁移eslint报错解决办法及最佳实践的相关资料,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了Vue中关闭弹窗组件时销毁并隐藏操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令），这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下2023-11-11
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章2021-08-08
这篇文章主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
Vue中Axios配置不同的baseURL,请求不同的域名接口方式
这篇文章主要介绍了Vue中Axios配置不同的baseURL,请求不同的域名接口方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题
这篇文章主要介绍了ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了vue3源码分析reactivity实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论