watch属性与我们之前学习的方法(methods)、过滤器(filters)、计算属性(computed)同级。
watch的作用:负责监听数据源中的数据,当数据发生变化时触发其方法。就是起到一个监听器的作用,监视这个数据。
要侦听那个数据,就在watch内写方法,方法名必须与数据名相同,在方法内就写对应的处理程序;当数据发生变化时就触发;这一点与计算属性(computed)相似,只有数据发生变化时才触发,但是侦听器属性,比计算属性计算效率消耗大。
写法:
watch:{
msg(a1,a2){
//处理程序
}
}
方法名msg就是监听的data内的msg属性,a1接收每次msg改变时的那个值,a2为未改变时msg的值。
代码展示一下用法:
<div id="box">
<div @click="change"> {{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data:{
msg:666
},
methods: {
change(){
this.msg=777
}
},
watch:{
msg(){
console.log("msg发生了变化",this.msg);
}
}
})
</script>
当我们点击666时,msg被改变,watch侦听到其内的msg方法触发,打印:
再次点击666这个标签时,msg的值还是被赋予777没有发生改变,即不会触发,控制台不再打印。
特殊:当data内的数据是个对象时,侦听这个对象但是修改的是对象内的值是否会触发侦听呢?
答案是不会。
修改了引用数据内部的属性值:如果页面中使用了这个属性,页面会重新渲染,但是侦听器属性不会触发;只有修改了引用数据的引用 才能触发侦听器属性。
解决方法:引入一个新词深度侦听,虽然可以实现触发,但是计算效率将会消耗更大,不推荐使用
在写法上也发生了改变,采用对象的写法:
watch:{
obj:{
deep:true,//判断是否深度侦听,true为侦听,false则不
handler:()=>{}//处理函数
}
}
同样演示一下:
<div id="box">
<div @click="change"> {{obj.a}}</div>
</div>
<script>
new Vue({
el:"#box",
data:{
obj:{
a:"a"
}
},
methods: {
change(){
this.obj.a="aa"
}
},
watch:{
obj:{
deep:true,
handler:()=>{
console.log("侦听到a的变化");
}
}
}
})
</script>
点击a时,控制台打印:
到这里我们已经基本掌握了watch的基本用法,那么我们动手写两个实际应用。
一、汇率转换
需求:当我们在一个框内输入金额时,另一个框内对应的显示对应货币的转换的金额
代码展示:
<div id="box">
人民币: <input type="text" v-model="rmb" ><br>
韩元: <input type="text" v-model="hy" >
</div>
<script>
new Vue({
el:"#box",
data:{
rmb:0,
hy:0
},
methods: {
change(){
this.msg=777
}
},
watch:{
rmb(newvalue,oldvalue){
this.hy=newvalue*15
},
hy(newvalue,oldvalue){
this.rmb=(newvalue/15).toFixed(2)*100/100
}
}
})
</script>
二、余额提示
要求:当金额低于一定金额时提醒用户充值
<div id="box">
{{money}}
<button @click="change">购买一次花20元</button>
</div>
<script>
new Vue({
el:"#box",
data:{
money:100
},
methods: {
change(){
if (this.money>=20) {
this.money-=20
}
}
},
watch:{
money(newvalue,oldvalue){
if (oldvalue<=20) {
alert("余额不足了请充值")
}
}
}
})
</script>