vue2和vue3，一个很大区别的特性，一个elemntui v2表单校验引发的血案

底层api

vue2用的是Object.definedProperty

vue3用的是Proxy

这大家都知道，问了都说知道什么回事😄😄，对不对

那应该大家都知道Proxy的性能比Object.definedProperty好了吧

那就不说了

拜拜😂～～

常识

早期Vue（v1，v2）开发的时候有个要求，data里面元素的值是个对象（例如名字叫from）的时候，

这个对象的属性必须在初始化时候都提供默认值，不能遗漏某个属性，后面再补充，

除非用this.$set(this.form,”attr”,”value”)去更新

原因

这是为什么呢？

因为vue实例的时候只对data返回的对象的原始进行遍历并追加Object.definedProperty监听，给所有对象属性添加get和set代理

如果初始化的时候没有声明全对象的属性，那就会缺少监听 而this.$set就是主动补全 set 和get的

好吧，事情是这么个事情，道理是这样个道理，大家都明白了

碰壁

可是吧，最近我还是猜到了一个同样原因导致的坑

elementui 大家都用过吧

他的表单校验也很熟悉的吧

• Form元素添加model和rules
• Form-item添加prop，同时也可有自己的rules

然后，我弹窗编辑一个数据，数据都有了，但是死活都过不了校验，就是说那个表单没值

有没有值我不知道啊，即是真的不知道，那再模板里面{{变量}}版定下值不就也可以了吗

我发现还真的有值了，页面也渲染了，但是elementui就是校验不通过

折腾了一个多小时，什么场景都试了下就是不行

真相

后面发现啊，原来获取详情数据的时候，返回回来少了两个参数，代码如下

getData（）.then(res=>{
this.form=res.data;
this.form.a=“”;
this.form.b=“2”
})

a和b是缺少的，我后面补上了，但是elementui v2就是没有收集到最新数据，即是后面a有变更了，视图也可以同步 我感觉这个并不是vue的get和set的缺失，和前面说的场景不一样，因为视图都可以更新了 改为如下就好了

修复

getData（）.then(res=>{
const form={
…res.data,
a:””,
b:””
}
this.form=form;
})

暂时没想到为何，后面发现补充