Vue内watch侦听器详解
watch是Vue内部提供的一个用于侦听功能的更通用的方法,其用来响应数据的变化,通过特定的数据变化驱动一些操作。Vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时,推荐使用该方法。
<template>
<div></div>
</template>
<script>
export default {
data(){
variable:null, //需要监听的变量
},
watch:{
// watch内监听variable变量,当其值有变化时执行
variable(newVal,oldVal){
// newVal为新值,oldVal为旧值
}
}
}
</script>
也可以这样写
watch:{
// watch内监听variable变量,当其值有变化时执行
variable:{
handler(newVal,oldVal){
// newVal为新值,oldVal为旧值
}
}
}
immediate用法
上面是watch侦听器的普通用法,就是当未设置immediate或者immediate的值为false时,被侦听的变量在页面初次加载时第一次绑定值得时候,并不会执行监听操作;但是当设置了immediate的值为true时,则会立即执行一次监听操作。
watch:{
// watch内监听variable变量,当其值有变化时执行
variable:{
handler(newVal,oldVal){
// newVal为新值,oldVal为旧值
},
immediate:true //在页面初次加载时,就会执行一次监听操作,调用这个函数
}
}
deep深度监听
侦听普通变量的变化是使用以上方法,当侦听的某个变量值是对象时则不起作用,这时需要使用deep深度监听。对象内有多个属性时,对象内的每个属性都会被侦听,每个属性的变化都会执行一次侦听操作。
<template>
<div></div>
</template>
<script>
export default {
data(){
person:{
name:'',
age:'',
sex:''
},
},
watch:{
// 此处监听person对象变量
person:{
handler(newVal,oldVal){
// newVal为新值,oldVal为旧值
},
deep:true //深度监听,当监听对象中的某个属性发生变化时,都会进行监听操作,调用这个函数
}
}
}
</script>
所以,完整版可以这样写。既能实现首次加载时监听又能实现深度监听。
<template>
<div></div>
</template>
<script>
export default {
data(){
person:{
name:'',
age:'',
sex:''
},
},
watch:{
// 此处监听person对象变量
person:{
handler(newVal,oldVal){
// newVal为新值,oldVal为旧值
},
immediate:true, //在页面初次加载时,就会执行一次监听操作,调用这个函数
deep:true, //深度监听,当监听对象中的某个属性发生变化时,都会进行监听操作,调用这个函数
}
}
}
</script>