vue2侦听器(watch)的基本使用

侦听器(watch)的基本使用"/>

vue2侦听器(watch)的基本使用

侦听器是用于侦听数据变化的，每次被侦听的数据发生变化，被侦听数据的对应函数都会被执行一次。

watch侦听数据分两种情况，一种是简单数据类型，另一种是复杂数据类型。

情况1，简单数据类型侦听

<button @click='a++'></button>data () {return {a: 2};
},
watch:{
a(newval,oldval){
console.log(newval,oldval)
}
}输出：3 2

这种写法是简单写法，用于侦听简单数据类型。

格式为：

wactch:{}被侦听数据(){}new,oldvalval new其中neewval 是被侦听数据改变之后的新数据，oldval是被侦听数据改变之后的新数据前的数据。

情况2：，复杂数据类型侦听

<button @click='a.s++'></button>data () {return {a: {s:3,d:7}};
},
watch:{
a:{
immediate:true,
deep:true,
handler(Val){console.log(Val)}
}
}输出：{s:4,d:7}

这种写法也是侦听器的完整写法，用于侦听复杂数据类型内发生变化，也可以用于侦听简单数据类型。

watch的完整写法为：

被侦听数据:{

immediate:true或者false,

deep:true或false,

handler(Val){ }

}

其中，immediate若为true则进入页面立即侦听一次，

deep为true则表示开启深度侦听,这时复杂数据类型里面的任何数据变化都会触发侦听，

handler就是每次触发侦听之后执行的函数，里面的Val是更新之后的新数据。

注意：复杂数据类型的数组若被侦听，被侦听数组使用下标修改数组内数据，侦听器不会被触发，

例：数组A=[1,2,3] 修改：A[0] = 0

上面的方法不会触发侦听器，数组的push,unshift,shift等等方法可以正常的触发侦听器。