watch侦听器是我们监视数据变化的一种函数,并可以针对数据的变化来做出对应的操作
与Vue2的过滤器相似,watch侦听器也需要在Vue实例对象中添加一个watch节点
<div id="app">
<input type="text" v-model="test">
</div>
const vm = new Vue({
el:'#app',
data:{
test:'hello Vue'
},
watch:{
//侦听test值的变化
//要监视哪个数据的变化就把键作为方法名
//newVal是变化后的新值--oldVal是变化前的旧值
test(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
这样我们就可以实时监听数据的变化,并触发指定的执行操作
这时我们有一个问题:
我们想要进入网站页面就立即触发依次侦听器-----这个问题该怎么实现呢?
上面的普通方法格式侦听器肯定是实现不了的,我们需要使用对象格式的侦听器,并通过immediate选项让侦听器自动触发:
watch:{
test:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate : true
}
}
这样我们每次进入网站页面或者刷新页面都会触发一次侦听器:
除了immediate选项,我们的侦听器还有一个deep选项,是用来进行深度监听的:
如果我们侦听的是一个对象,当这个对象中的属性发生了变化的时候,如果不使用deep深度监听的话是不可能监听到对象中属性的变化的,并且侦听器也不会触发
当我们开启深度监听后,只要对象中的任何一个属性发生了变化,都会触发侦听器:
<div id="app">
<input type="text" v-model="test.val">
</div>
const vm = new Vue({
el:'#app',
data:{
test:{
val : "hello Vue"
}
},
watch:{
test:{
handler(newVal){
console.log(newVal)
},
deep:true
}
}
})
这样监听的是对象属性,如果我们想要监听对象的子属性变化,我们需要:
const vm = new Vue({
el:'#app',
data:{
test:{
val : "hello Vue"
}
},
watch:{
'test.val'(newVal){
console.log(newVal)
}
}
})
俩种书写方式都可以,个人感觉如果业务不繁琐的话还是''引号方式比较好用