Vue watch 监听手机号输入完毕后请求数据

Bac: 需要在用户输入手机号之后，调用后台接口去获取对应该手机号的数据情况

思路是：监听用户输入手机号，当输入的手机号长度 = 11 的时候，此时再去请求接口。

在这里监听学习到了两种方式：

一、watch 监听 计算属性的值

watch:{
          customerMobile (val, oldval) {
            if (val.length === 11) {
              this.handleCustomerChange(val)
            }
            // clearTimeout(this.timeout)
            //   this.timeout = setTimeout(() => {
            //     this.handleCustomerChange(val)
            //   }, 500)
          }
        },
 computed : {
          customerMobile () {
            return this.addForm.mobile
          }
    },

　　methods: {

          // 输入手机号，客户名称联系人联动

          handleCustomerChange(){

            this.$http.get(`${window.SITE_CONFIG['baseURL']}/presale/presalelist/getDataByMobile`,

            {

              params:{

                mobile: this.addForm.mobile

              }

            })

            .then(data => {

              if (data.result.code === 0){

                this.addForm.username = data.result.data.customerName

                this.addForm.linkman = data.result.data.name

              } else {

                this.$message({

                  message: data.result.msg,

                  type: 'error',

                  duration: 1500

                })

              }

            })

          }

}

二、watch直接监听某个对象的属性

watch:{
          'addForm.mobile' : function(val, oldval){
              if (val.length === 11) {
              this.handleCustomerChange(val)
            }
          }
       },