Vue监听器属性watch

监听器属性

  • 使用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
                // val是新数据
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                //   注意:  这里 lastName 对应着data 中的 lastName 
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

监听data中的对象

第一种解决方案:直接对象
将里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不这样开销是蛮大的。
现在我需要监听这个queryData,我可以这样做:

watch: {
   queryData: {
     handler: function() {
      //do something
     },
     deep: true
   }
}

第二种解决方案:deep
当对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样

watch: {
   'queryData.name': {
     handler: function() {
      //do something
     },
   }
}

第三种解决方案:(computed+watch)
或者还可以这样巧用计算属性

  computed: {
      getName: function() {
        return this.queryData.name
      }
    }
    watch: {
       getName: {
         handler: function() {
          //do something
         },
       }
    }
    

监听数组

数组的修改要用

vm.$set(数组名, 下标, 要修改的值);
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值