监听表单里的数据变化

想要异步判断某一项数据是否已经存在的时候，由于我是写在表单中的，这个时候需要监听表单对象
实现方法：

<el-form label-width="150px" label-position="right" :inline="true" :model="addForm" :rules="addRuleForm">
      <el-form-item label="业务代码：" prop="code">
        <el-input v-model="addForm.code"></el-input>
      </el-form-item>
</el-form>

方法1：只监听一个数据

watch: {
    'addForm.code' (val) {
      console.log(val)      
    }  
}

方法2：监听整个对象

watch: {
    addForm: {
      deep: true,
      handler (val) {
        if (val) {
          this.addForm.parentId = val.moduleId
        }
      }
    }
}

方法三：实现输入框回馈信息
效果图：

 validBusinessCode (rule, value, callback) {
  if (value) {
    this.checkCodeing = true
    if (this.auto) clearTimeout(this.auto)
    this.auto = setTimeout(() => {
      businessDefManagerApi.validBusinessCode(value).then(res => {
        this.checkCodeing = false
        if (res.status === 0 && res.data.isExist) {
          callback()
        } else {
          callback(new Error('业务代码已存在'))
        }
      })
    }, 500)
  } else {
    if (this.auto) clearTimeout(this.auto)
    this.checkCodeing = false
    callback()
  }
},