在vue中,使用watch来响应数据的变化。普通用法就不过多说,本文主要介绍下高级用法,immediate、handler以及deep,
一、immediate(首次绑定)
我们想要最初绑定的时候也执行函数,就用到immediate。监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
data(){
return{
appid : '123456'
}
}
----------------------------------------------------------------
watch : {
appid : {
handler(v){
console.log(v)
},
immediate : true
}
}
二、deep(深度监听)
监听对象中的所有属性,对象中的任意属性发生改变都会执行函数
data(){
return {
obj : {
id : '0',
info : 'one'
}
}
}
---------------------------------------------------------------
watch: {
obj: {
handler(v){
console.log(v)
},
deep:true
}
}
三、监听对象中的特定一个属性
监听对象中的特定某一个属性,只有当此属性发生改变时,handler函数才会执行
data(){
return {
obj : {
id : '0',
info : 'one'
}
}
}
---------------------------------------------------------------
watch: {
'obj.id'(v){
console.log(v)
}
}
四、相关文档
vue之侦听器:https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8