记一次iview-form model对象内某个属性validate失灵的问题

最近给一位同事解决了一个很难发现的问题，我们先来看下下面这段代码

以上是一个form表单校验规则的编写，我们采用了初始化form联动的modal对象拆为了两部分来写

第一部分在data内

formInline: {
  password: ''
},

• 这里声明了password属性

第二部分在created内

created() {
  this.formInline.user = ''
}

这样导致的结果是无论页面输入框user输入任何值，rules内user的validator自定义函数内拿到的value值始终为 created内赋值的值，也就是空值，导致validate永远过不去

问题.png

原因分析

1、Form内的model为formInline，只是将password加入了Object.difinePropertity的监听机制内，后面通过this.formInline.user 加入的属性值没能监听到值的联动变化，导致rules内user提取到的值永远是初始值；

解决思路

1、created内附加属性的通过set去做

this.$set(this.formInline, 'user', '')

2、保持在原始对象内就有user属性值存在 这样能够成功加入到监听机制内

formInline:{
    user: '',
    password: ''
}

真实的业务场景问题

• 张三在初始model对象内有属性值存在的，但是在created()函数内 不小心写了这样一句话

created() {
   const { userBase }  = this.datas  // 这个对象内有 userBase { password: '',  sex: '男', name: ''}
    this.formInline = userBase   // 这里将原本加入了rule规则内的user属性给丢掉了

    this.formInline.user = 'stepday' // 这里通过这种方式设置属性user的初始值
}

最后的修改处理

1、对象合并的写法改变

- this.formInline = userBase
+ Object.assign(this.formInline, userBase) // 确保formInline内的属性值不会丢掉  破坏rule规则

写在最后的话

• 对象拆分的情况下务必使用vue.set 将对象加入监听机制内
• 对象赋值的时候尽可能要确保属性丢失的情况，尽可能采用对象合并 Object.assign 拷贝模式
• 将vue2.x系列的Object.defineProperty机制原理深入脑海
• 以上问题如果是vue3 用proxy来监听就不会有这样的问题存在