侦听属性

侦听属性

1. 侦听属性依靠watch选项来实现对自身变量的检测。

	侦听属性只能检测在data中设置好的数据。
	当侦听的属性值发生变化时，执行侦听属性所对应的函数。

语法格式：

watch:{
	   侦听属性：function(newValue,oldValue){
	     //当侦听属性的取值发生变化时所执行的代码
	}
}

例：watch:{
	       kb:function(newValue,oldValue){
	          this.b=newValue*1024;
		}
	}

2.侦听属性的第二种语法格式：可以为侦听属性添加新的属性。

watch:{
   侦听属性:{
      handler:function(newValue,oldValue){
          //当侦听属性的取值发生变化时所执行的代码
			}
		}
	}

例：watch:{
      	kb:{
       	   handler:function(newValue,oldValue){
          		 this.b=newValue*1024;
				},
		immediate:true     //当Vue实例创建成功后自动执行kb的handler函数。
		}
	}

3. 侦听属性的新属性：

	immediate：逻辑值。若设置为true，则当Vue实例创建时会自动执行一次侦听属性的函数。
	
	deep：逻辑值。设置是否进行深层的监听（针对自定义对象来进行设置的）。

• 当侦听属性是一个对象时，改变对象内属性的取值时无法让侦听属性执行函数的。
• 除非改变侦听属性的完整对象，才可以执行侦听属性的函数。
• 当设置了deep:true时，利用对象的属性进行修改，对象属性的原值无法得到保留。

例：data:{ obj:{a:10,b:20} }
    （A）watch:{
            obj:function(newValue,oldValue){
                 console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b);
				 console.log('新值：a=' + newValue.a + ",b=" + newValue.b);
			}
		}
测试：vm.obj.a=100;       //不触发侦听属性obj的function函数
      vm.obj={a:100,b:500};   //触发侦听属性obj的function函数
      旧值：a=10,b=20
      新值：a=100,b=400
    （B）watch:{
            obj:{
				handler:function(newValue,oldValue){
                 	console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b);
					console.log('新值：a=' + newValue.a + ",b=" + newValue.b);
			},
			deep:true
		}
	}
测试：vm.obj.a=‘A’    //触发侦听属性obj的handler函数
      旧值：a=‘A’,b=20
      新值：a=‘A’,b=20

4. 可以通过$watch形成Vue实例的方法：

vm.$watch(‘kb’,function(newValue,oldValue){
      this.b=newValue*1024;
})

5. 计算属性和侦听属性的区别：

• 计算属性使用computed选项实现；侦听属性使用watch选项或者$watch()方法实现。

• 计算属性无需在data数据中定义；侦听属性必须侦听data数据中已有的变量。

• 计算属性是依赖变量发生变化自动再次计算该属性的值。
  侦听属性是被侦听的变量发生变化执行指定的函数。

• 计算属性无法完成异步操作；侦听属性可以完成异步操作。

侦听属性纠纷想到这里啦~
good luck to you！！