Vue内watch侦听器详解
watch是vue内部提供的一个用于侦听功能的更通用的方法,其用来响应数据的变化,通过特定的数据变化驱动一些操作。
vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时,推荐使用该方法。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
variable:null,
},
watch:{
// 此处监听variable变量,当期有变化时执行
variable(item1,item2){
// item1为新值,item2为旧值
}
}
}
</script> -->
如上代码所示:当变量variable产生变化时,会被页面侦听到并执行相关的操作
也可以这样写:
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
variable:null,
},
watch:{
variable:{
// 此处监听variable变量,当期有变化时执行
handler(item1,item2){
// item1为新值,item2为旧值
}
}
}
}
</script> -->
immediate用法
上面是watch侦听器的普通用法,就是当未设置immediate或者immediate的值为false时,
被侦听的变量在页面初次加载时第一次绑定值的时候,并不会执行监听操作;但是当设置了immediate的值为true时,
则会立刻执行一次监听操作。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
variable:null,
},
watch:{
// 此处监听variable变量,当期有变化时执行
variable(item1,item2){
// item1为新值,item2为旧值
},
immediate:true // watch侦听操作内的函数会立刻被执行
}
}
</script> -->
deep深度监听
侦听普通变量的变化是使用以上方法,当侦听的某个变量值是对象时则不起作用,这时需要使用deep深度监听。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
obj:{
a:''
},
},
watch:{
// 此处监听obj属性a值变量
'obj.a'(item1,item2){
// item1为新值,item2为旧值
},
deep:true
}
}
</script> -->
如果对象内有多个属性,并采用以下写法,则对象内每个属性都会被侦听,每个属性的变化都会执行一次侦听操作。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
obj:{
a:'',
b:'',
c:''
},
},
watch:{
obj:{
// 此处监听obj属性a值变量
handler(item1,item2){
// item1为新值,item2为旧值
},
deep:true
}
}
}
</script> -->
数组(一维、多维)的变化不需要深度监听,对象数组中对象的属性变化则需要deep深度监听(待验证)。
验证:
1.数组(一维、多维)变化
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
newArr:[1,2,3,4],
testArr:[[1,2,3],4,5]
},
watch:{
newArr(val){
// ...
},
testArr(val){
// ...
},
}
}
</script> -->
2.对象属性变化
对象内某个属性产生变化,直接监听该对象是监测不到变化的,只能监听该对象的属性变化。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
newObj:{
a:'a',
b:2
},
},
watch:{
'newObj.a'(val){
// ...
},
}
}
</script> -->
3.数组对象中对象属性变化
数组对象中对象属性变化监测需要使用deep:true,多少层内产生变化都可以监测到。
<!-- <template>
<div></div>
</template>
<script>
export default {
data(){
newArr:[
{
list:[
{
label:null
}
]
}
]
},
methods:{
show(){
this.newArr[0].list[0].label = "2020年11月10日10:36:58";
}
},
watch:{
newArr:{
handler(val){
// ...
},
deep:true
},
}
}
</script> -->