本文将介绍在watch中对一个单独变量、对象中的某个属性、对象整体的监听的一般方法,以及深度监听的方法。
一、普通监听方式
1、监听一个变量的值变化
<!--页面-->
<template>
<div>
监听单个变量的变化:
<input type="text" v-model="singleData">
</div>
</template>
<!--js-->
data () {
return {
singleData:'我是初始值'
}
},
watch:{
singleData(newVlaue,oldValue){
console.log('新值:'+newVlaue);
console.log('旧值:'+oldValue);
}
}
结果如下:
2、监听一个对象中的单个属性值的变化
<!--页面-->
<template>
<div>
监听obj中data1属性的变化:
<input type="text" v-model="obj.data1">
<br>
监听obj中data2属性的变化:
<input type="text" v-model="obj.data2">
</div>
</template>
<!--js-->
data () {
return {
obj:{
data1:'我是data1的初始值',
data2:'我是data2的初始值'
}
}
},
watch:{
'obj.data1':function(newvalue,oldvalue){
console.log('data1变化前的值:'+oldvalue);
console.log('data1变化后的值:'+newvalue);
},
'obj.data2':function(newvalue,oldvalue){
console.log('data2变化前的值:'+oldvalue);
console.log('data2变化后的值:'+newvalue);
}
},
结果如下:
二、深度监听
1、监听一个对象整体的变化(即监听对象所有属性值的变化)
<!--页面-->
<template>
<div>
监听obj中data1属性的变化:
<input type="text" v-model="obj.data1">
<br>
监听obj中data2属性的变化:
<input type="text" v-model="obj.data2">
</div>
</template>
<!--js-->
data () {
return {
obj:{
data1:'我是data1的初始值',
data2:'我是data2的初始值'
}
}
},
watch:{
obj:{
handler:function(newvalue){
console.log('新值:');
console.log(newvalue);
},
deep:true//deep置为true表示:对象中任一属性值发生变化,都会触发handler中的方法
}
},
效果如下:
2、以上三种方式监听,都只会在变量改变、对象的属性值变化的时候才会触发,即:初始化绑定的时候并不会触发。那么如何在初始化绑定的时候就触发监听事件,拿到初始值呢?
使用immediate,在页面初始化,属性值还没变化的时候就会触发handler方法
obj:{
handler:function(newvalue){
console.log('新值:');
console.log(newvalue);
},
deep:true,//对象中任一属性值变化都会触发handler方法
immediate:true//初始化绑定时就会执行handler方法
}
结果如下:
有问题或意见,欢迎留言讨论!