vue数据监听器

一，前言

1.Vue Option Api的watch选项用于监听数据的改变。

二，watch使用

1.watch接受一个对象，

（1）对象的键是需要观察的值，也可以是一个表达式，
（2）对象的值可以是函数，对象，数组，用于监听值变化的处理。

2.使用函数和方法处理监听变化时

new Vue({
	data:{
		a:1，
		b:1
	},
	watch:{
		a:function(newVal,oldVal){}, //变量a是需要监听的值，函数是处理函数 
		b:'watchB',
	}
})

3.使用对象处理监听变化时，

handler选项：表示回调函数
deep选项：无论嵌套多深，都能监听
immdiate选项：handler会在监听开始时被立即执行。

new Vue({
	data:{
		a:1，
		b:1
	},
	watch:{
		a:{
			handler:function(newVal,oldVal){}
			deep:true
		}
})

4.使用数组形式时，会一个一个执行数组里的回调函数。

new Vue({
	data:{
		a:1，
		b:1
	},
	methods:{
		method1(){},
		method2(){}
	}
	watch:{
		a:[function(newVal,oldVal){},
			methods1,
			methods2]
})

三，$watch实例方法

1.$watch方法和watch选项的作用是一样的，都用于监听值的变化。

2.使用形式：$watch(reg||function, callback , obj)，

（1）reg||function：是需要监听的值，可以是表达式（表达式只接受检测的键路径），当监听的值比较复杂时使用函数。当函数返回值发生变化时就会执行回调函数。

（2）callback ：回调函数，

（3）obj:选项对象，有deep,immdiate。

3.$watch() 返回一个取消观察函数，用来停止触发回调：

var vm= new Vue({
	data:{
		a:[3,2,1]}
	})

var unwatch=vm.$watch(a,function(newVal,oldVal){
	console.log(newVal,oldVal)
	console.log('数组元素改变会触发$watch')
	unwatch()})
	
vm.a.push(0)

四，注意事项

1.当监听数组变化时，可不使用deep深度遍历。

2.但当监听整个对象的变化时需要使用deep。

3.如果只想监听对象的某个属性，可以使用表达式，例如：'obj.a':method

4.对监听数组和使用deep监听整个对象时，元素改变会触发回调函数，但是oldVal=newVal，两个值相同都等于改变后的值。

5.watch是惰性的，页面第一次加载时不触发watch函数，只有监听的数据发生变化时，才会触发watch函数