vue的监听函数watch()的用法

最近接到一个bug，要求：手机号和密码不输入的情况下，登录按键是灰色的，不可点击；手机号和密码输入的情况下，登录按键是亮色的，可以点击；细想一下用vue的监听函数watch()去解决

        watch: {
            //tel 是data() 里面的数据tel，newVal是tel变化后的值，oldVal是tel变化前的值
            tel(newVal,oldVal){
                console.log(newVal,oldVal)
                if(newVal != ""){
                    this.isDisabled = false
                }else{
                    this.isDisabled = true
                }
            }
        },

 

        watch: {
            //tel 是data() 里面的数据tel，newVal是tel变化后的值，oldVal是tel变化前的值
            tel: {
                handler(newVal, oldVal) {
                    console.log(newVal,oldVal)
                    if(newVal != ""){
                        this.isDisabled = false
                    }else{
                        this.isDisabled = true
                    }
                },
                // deep属性对对象进行深度监听
                deep: true,
                // 这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值        发生改变才会执行。
                // 如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
                immediate: true
            }
        },