Vue框架——侦听器

侦听器

虽然计算属性和侦听器的功能类似，数据变化就会触发某个函数。但是当需要在数据变化时执行异步或开销较大的操作时，侦听器这个方式是最有用的。

侦听器的用法

watch:{
    elName:function(val){
        
    }
}

侦听器触发的功能函数写在watch属性里，函数名与所侦听数据的名字一一对应，函数的参数为所侦听数据的值

用户名验证案例

<div id="app">
    <div>
        <label for="">用户名：</label>
        <input type="text" v-model.lazy="username">
        <span>{{tip}}</span>
    </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        username: '',
        tip: ''
    },
    methods: {
        checkUsername: function(username) {
            // 使用定时任务的方式模拟接口的调用
            var that = this;
            setTimeout(function() {
                // 模拟接口调用
                if (username == 'cmy') {
                    that.tip = "用户名已存在";
                } else {
                    that.tip = "用户名可以使用";
                }
            }, 2000);
        }
    },
    watch: {
        username: function(val) {
            // 调用后台接口，验证用户名的合法性
            this.checkUsername(val);
            this.tip = "验证中...";
        }
    }
});

当username属性的值改变时，就会触发watch里的对应函数，为避免频繁触发，可以使用lazy修饰符将触发的方式设置成失焦事件