今天在项目中遇到了从后端获取到的数据,然后在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
代理整个对象,可以监听所有属性的读写,包括动态添加的