Vue入门指南——侦听器

小鱼儿 2023-07-02 07:26 7阅读 0赞

### 目录： ###

*   *  一、什么是侦听器？
     *  二、侦听器的应用场景
     *  三、侦听器的用法
     *  四、小案例（验证用户名是否可用）
     *  五、注意事项

## 一、什么是侦听器？ ##

侦听器是用来检测数据变化从而来添加执行自己自定义逻辑的代码（数据一旦发生变化就通知侦听器所绑定方法 ）。这一点和计算属性很相似,然而计算属性一般作用于简单的一些小逻辑代码,如果逻辑比较复杂可以使用侦听器。

## 二、侦听器的应用场景 ##

*  一般用于异步或者开销较大的操作（如 ajax，计时器等一些耗时操作）

## 三、侦听器的用法 ##

<div id="app">
            <div>
                <span>名：</span>
                <span>
            <input type="text" v-model='firstName'>
          </span>
            </div>
            <div>
                <span>姓：</span>
                <span>
            <input type="text" v-model='lastName'>
          </span>
            </div>
            <div>{ { fullName}}</div>
        </div>
    
      <script type="text/javascript">
            /* 侦听器 */
            var vm = new Vue({ 
                el: '#app',
                data: { 
                    firstName: 'Jim',
                    lastName: 'Green',
                    // fullName: 'Jim Green'
                },
                 //watch 属性 定义 和 data 已经 methods 平级 
                watch: { 
                    // 注意： 这里firstName 对应着data 中的 firstName 
                    // 当 firstName 值 改变的时候 会自动触发 watch
                    firstName: function(val) { 
                        this.fullName = val + ' ' + this.lastName;
                    },
                    // 注意： 这里 lastName 对应着data 中的 lastName 
                    lastName: function(val) { 
                        this.fullName = this.firstName + ' ' + val;
                    }
                }
            });
        </script>

## 四、小案例（验证用户名是否可用） ##

**需求**：输入框中输入姓名，失去焦点时验证是否存在，如果已  
经存在，提示从新输入，如果不存在，提示可以使用。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div>
          <span>用户名：</span>
          <span>
            <input type="text" v-model.lazy='uname'>
          </span>
          <span>{ { tip}}</span>
        </div>
      </div>
      <script type="text/javascript" src="./lib/vue.js"></script>
      <script type="text/javascript">
        /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */
        var vm = new Vue({ 
          el: '#app',
          data: { 
            uname: '',
            tip: ''
          },
          methods: { 
            checkName: function(uname) { 
              // 调用接口，但是可以使用定时任务的方式模拟接口调用
              var that = this;
              setTimeout(function(){ 
                // 模拟接口调用
                if(uname == 'admin') { 
                  that.tip = '用户名已经存在，请更换一个';
                }else{ 
                  that.tip = '用户名可以使用';
                }
              }, 2000);
            }
          },
          watch: { 
            uname: function(val){ 
              // 调用后台接口验证用户名的合法性
              this.checkName(val);
              // 修改提示信息
              this.tip = '正在验证...';
            }
          }
        });
    
      </script>
    </body>
    </html>

## 五、注意事项 ##

*  侦听器里面的参数`val`为当前当前数据变化后的最新值。
 *  侦听器里的属性名需要与`data`数据中的名字一致。
 *  watch 中的属性 一定是data 中 已经存在的数据。
 *  侦听器性能方面比不上计算属性。
 *  当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

--------------------

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[Poetic Code]: https://blog.csdn.net/weixin_44253336