vue之watch的数据监听使用

Vue提供了一个watch方法可以监听data内指定数据变化

监听简单数据

当value1或value2的内容发生变化时，就会分别调用value1()方法或value2()方法

注意：watch里面的方法名与data内的值名一致

data() {
    return {
        value1: 0,
        value2: 0   
    }
},
watch: {
    value1(newValue, oldValue) {
        console.log('当前值：'+newValue+"旧值："+oldValue);
    },
    value2(newValue, oldValue) {
        console.log('当前值：'+newValue+"旧值："+oldValue);
    }
}

监听对象所有属性

要想监听数组或对象就得 加 deep:true 语句，做深度监听

一旦所监听的对象的任何一个属性改变，都会触发 watch

data() {
　　return {
　　　　infos: {
　　　　　　name:'djb',
　　　　　　sex: 'boy'
　　　　}   
    }
},
watch: {
　　infos: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

监听对象具体属性

要想监听具体属性，还得与计算属性computed配合

只有当name属性发生变化时，触发 watch

data() {
　　return {
　　　　infos: {
　　　　　　name: djb,
　　　　　　sex: 'boy'
　　　　}   
    }
}，
computed: {
    getName: function() {
    	return this.infos.name                  //监听的具体属性
    }
}
watch: {
     getName: {
         handler: function(newValue, oldValue) {
           console.log(newValue)
         },
     }
}

如果想监听对象中的多个指定值，可以如下的操作

data() {
　　return {
     rexiaos:[
　　　　{
　　　　　　name: djb,
　　　　　　sex: 'boy'
　　　　},
       {
　　　　　　name: hw,
　　　　　　sex: 'boy'
　　　　},
       {
　　　　　　name: ch,
　　　　　　sex: 'boy'
　　　　} 
    ]
  }
}，
computed: {
    getName: function() {
    	var infos=[];
        $.each(this.rexiaos,function(index,value){
          infos.push(value.name)
        });
        return infos;
    }
}
watch: {
     getName: {
         handler: function(newValue, oldValue) {
           console.log(newValue)
         },
     }
}

有什么不懂的可加我 微信公众号  “敲呗”  ，留言给我，我会尽力帮您解决