最近給一位同事解決了一個(gè)很難發(fā)現(xiàn)的問(wèn)題，我們先來(lái)看下下面這段代碼

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formInline: {
                    password: ''
                },
                ruleInline: {
                    user: [
                        { 
                          required: true, 
                          message: 'Please fill in the user name', 
                          trigger: 'blur',
                          validator: function(rule, value, callback) {
                            console.log(value)
                            return new Promise((resolve, reject) => {
                               if(value) resolve(true)
                               else reject(false)
                            })
                          }
                        }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {            
            this.formInline.user = ''
        },
        methods: {
            handleSubmit(name) {
                console.log(this.$refs[name]) 
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        }
    }
</script>

以上是一個(gè)form表單校驗(yàn)規(guī)則的編寫，我們采用了初始化form聯(lián)動(dòng)的modal對(duì)象拆為了兩部分來(lái)寫

第一部分在data內(nèi)

formInline: {
  password: ''
},

• 這里聲明了password屬性

第二部分在created內(nèi)

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

這樣導(dǎo)致的結(jié)果是無(wú)論頁(yè)面輸入框user輸入任何值，rules內(nèi)user的validator自定義函數(shù)內(nèi)拿到的value值始終為 created內(nèi)賦值的值，也就是空值，導(dǎo)致validate永遠(yuǎn)過(guò)不去

問(wèn)題.png

原因分析

1、Form內(nèi)的model為formInline，只是將password加入了Object.difinePropertity的監(jiān)聽機(jī)制內(nèi)，后面通過(guò)this.formInline.user 加入的屬性值沒能監(jiān)聽到值的聯(lián)動(dòng)變化，導(dǎo)致rules內(nèi)user提取到的值永遠(yuǎn)是初始值；

解決思路

1、created內(nèi)附加屬性的通過(guò)set去做

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

2、保持在原始對(duì)象內(nèi)就有user屬性值存在 這樣能夠成功加入到監(jiān)聽機(jī)制內(nèi)

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

真實(shí)的業(yè)務(wù)場(chǎng)景問(wèn)題

• 張三在初始model對(duì)象內(nèi)有屬性值存在的，但是在created()函數(shù)內(nèi) 不小心寫了這樣一句話

created() {
   const { userBase }  = this.datas  // 這個(gè)對(duì)象內(nèi)有 userBase { password: '',  sex: '男', name: ''}
    this.formInline = userBase   // 這里將原本加入了rule規(guī)則內(nèi)的user屬性給丟掉了

    this.formInline.user = 'stepday' // 這里通過(guò)這種方式設(shè)置屬性u(píng)ser的初始值
}

最后的修改處理

1、對(duì)象合并的寫法改變

- this.formInline = userBase
+ Object.assign(this.formInline, userBase) // 確保formInline內(nèi)的屬性值不會(huì)丟掉  破壞rule規(guī)則

寫在最后的話

• 對(duì)象拆分的情況下務(wù)必使用vue.set 將對(duì)象加入監(jiān)聽機(jī)制內(nèi)
• 對(duì)象賦值的時(shí)候盡可能要確保屬性丟失的情況，盡可能采用對(duì)象合并 Object.assign 拷貝模式
• 將vue2.x系列的Object.defineProperty機(jī)制原理深入腦海
• 以上問(wèn)題如果是vue3 用proxy來(lái)監(jiān)聽就不會(huì)有這樣的問(wèn)題存在