vue+element 学习之路（八）watch 深度监听

今天在做验证码功能需求的时候接触到了Vue中的 watch监听方法，它可以用来监听vue实例上的数据变动。

需求场景：
1.一开始‘’获取验证码‘’按钮默认为禁用状态，当用户输入了正确的手机号码格式后，按钮恢复可用状态。
2.点击获取验证码按钮之后，按钮中文本变为60s的倒计时，同时手机号码输入框与按钮为禁用状态，当倒计时结束后恢复可用状态。

需求1思路：
1.首先先给手机号码输入框telphone设定校验规则

2.绑定按钮的disabled

3.设定watch监听，deep:true 设置深度监听 当telphone值发生变化时触发handler方法
注意：这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch

handler函数中的意思就是每次telphone中数值发生变化时，都对其进行格式校验一次，当格式正确是，按钮恢复使用，非常好理解。

需求2思路：
当用户点击发送验证码按钮时，变更按钮中的文本并同时执行一个倒计时方法。
目的是为了防止用户请求次数过多，设定一分钟只能请求一次验证码。

当倒计时结束，按钮文本被换回‘获取验证码’ 并且手机号码输入框与获取验证码按钮恢复使用。

源码：

<template>
    <div>
        <el-form :model="user" :rules="rules" ref="user">
            <el-form-item prop="telphone">
                <el-input placeholder="请输入手机号码" v-model="user.telphone" :disabled="teldisabled">

                </el-input>
            </el-form-item>
            <el-form-item prop="yzm">
                <el-row :gutter="5">
                    <el-col :span="16">
                         <el-input placeholder="验证码" v-model="user.yzm">

                        </el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-button @click="code()" :disabled="disabled">{{btnMessage}}</el-button>
                    </el-col>
                    <el-col :span="1"></el-col>
                </el-row>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入登录密码（最少六位，字母、数字）" show-password>

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%">同意条款并注册</el-button>
            </el-form-item>
            <el-row style="font-size:12px;text-align:center">
                阅读<a href="#">《注册协议》</a>和<a href="#">《隐私条款》</a>
            </el-row>
        </el-form>
    </div>
</template>

<script>
//深度监听 输入完手机号码 校验正确 获取验证码按钮恢复正常
export default {
    data(){
        //自定义校验规则 正则表达式校验
        //手机格式
        let validateTelphone = /^1[34578]\d{9}$/;
        let isTelphone = (rule,value,callback) =>{
            if(!validateTelphone.test(value)){
                return callback(new Error('手机格式不正确！'))
            }else{
                callback()
            }
        }
        return{
            user:{
                telphone:'',
                password:'',
                yzm:''
            },
            //按钮文本
            btnMessage:'获取验证码',
            //获取验证码按钮默认禁用
            disabled:true,
            teldisabled:false,
            rules:{
                telphone:[
                    {required:true,message:'请输入手机号码',trigger:'blur'},
                    {validator:isTelphone}
                ],
                yzm:[
                    {required:true,message:'请输入验证码',trigger:'blur'},
                    {min:6,max:6,message:'验证码为六位数字',trigger:'blur'}
                ]
            }
        }
    },
    watch:{
        'user.telphone':{
            //deep:true 设置深度监听 当telphone值发生变化时触发handler方法
            deep:true,
            //这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
            handler:function(newVal,oldVal){
                console.log(newVal);
                //取newVal实时校验
                this.$refs['user'].validateField('telphone',(error)=>{
                    if(!error){
                        this.disabled = false;
                    }else{
                        this.disabled = true;
                    }
                })
            }
        }
    },
    methods:{
        // 模拟发送验证码接受验证码
        code(){
            this.$axios.post('/api/user/code',this.user).then(res=>{
                console.log(res.data);
                //开始倒计时60s
                this.btnMessage = 60;
                this.disabled = true;
                this.teldisabled = true;
                this.time();
            })
        },
        time(){
            if(this.btnMessage == 0){
                this.disabled = false;
                this.teldisabled = false;
                this.btnMessage = '获取验证码'
            }else{
                this.btnMessage--;
                setTimeout(() => {
                   this.time() 
                }, 1000);
            }
        }
    }
}
</script>

感觉自己写的代码存在一定耦合，若前辈们有更优雅的方法欢迎分享~~！