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修饰符将触发的方式设置成失焦事件