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
代理整个对象，可以监听所有属性的读写，包括动态添加的