Vue框架之侦听器

最新推荐文章于 2022-07-14 10:03:44 发布

宅羽

最新推荐文章于 2022-07-14 10:03:44 发布

阅读量190

点赞数

分类专栏： Vue框架

本文链接：https://blog.csdn.net/sky6even/article/details/104047955

版权

Vue框架专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文深入探讨Vue框架中的侦听器（watch）功能，讲解如何使用watch响应数据变化，特别是在处理异步操作和开销较大的场景。强调watch中监听的属性必须是data中已存在的。此外，还介绍了如何应对对象内部属性变化的监听问题，通过使用deep属性实现对象的深度监听。通过实例展示了如何有效运用侦听器来提升应用的响应性。

摘要由CSDN通过智能技术生成

◆ 侦听器：

使用watch来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

<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>

◆ 侦听器示例：

<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="js/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>