Vue中的侦听属性watch

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>