vue2数据双向绑定问题

今天在项目中遇到了从后端获取到的数据,然后在input中没办法修改,修改的值不进行回显。经排查是vue2中运用的是Object.defineProperty ,由于这个特性导致的。
如果是换成VUE3框架就不会出现这种问题
在前端我们在data中定义数据会经常定义一个空对象,将一个业务中的数据放在里面进行区分

比如一个一个食物表单
会定义一个
foodForm{}这样的形式 ,前端绑定就用v-mode=this.foodForm.name这样的形式

后端返回的属性特别多
你最后赋值的就用到了
this.foodForm.name = data.obj的形式直接赋值了

那么就出现了这个原理性的问题 vue绑定不到.

解决方法:
1foodForm初始化里面的属性
2 使用this.$set(this.editForm, name , data.obj)
因为set会会递归地将对象的属性转换为 Getter/Setter,从而在数据变化时触发依赖更新(视图更新)

原理
vue2是基于Object.defineProperty
Vue2 在初始化响应式数据时,只会对 data 中初始存在的属性进行响应式处理。
如果添加一个新属性(如 this.editForm.serial = 'xxx'),Vue 2 无法检测到,也不会触发视图更新
vue3是基于Proxy
代理整个对象,可以监听所有属性的读写,包括动态添加的

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容