一,前言
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
函数