在vue中可以使用watch来监听数据的变化,监听到数据变化后执行操作;
watch中的属性
immediate(立即处理 进入页面就触发)
deep(深度监听)
handler(执行函数)
一般监听:
export default {
data(){
name:"xx"
},
watch:{
//只要name的值发生变化,watch就会被调用,
name(newVal, oldVal){
//oldVal是name发生变化之前的值
//newVal是name发生变化之后的值
consloe.log("newVal","oldVal")
}
}
}
immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
export default {
data(){
name:"xx"
},
watch:{
//只要name的值发生变化,watch就会被调用,
name{
handler(newVal, oldVal){
//oldVal是name发生变化之前的值
//newVal是name发生变化之后的值
consloe.log("newVal","oldVal")
},
//立即执行
immediate: true
}
}
}
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
export default {
data(){
user:{
id:1,
name:"xx"
},
},
watch:{
//只要name的值发生变化,watch就会被调用,
user{
handler(newVal, oldVal){
//oldVal是name发生变化之前的值
//newVal是name发生变化之后的值
consloe.log("newVal","oldVal")
},
//立即执行
immediate: true
//深度监听
deep: true,
}
}
}