【Day3.侦听器watch】

1.监视属性watch：

        （1）当被监视的属性变化时, 回调函数自动调用, 进行相关操作

        （2）.监视的属性必须存在，才能进行监视！！

2.监视的两种写法：

           (1).new Vue时传入watch配置。

           (2).通过vm.$watch监视。

代码：

<div id="root">
        <h2>今天天气很{{Info}}</h2>
        <button @click="showInfo">点击切换</button>
        <hr/>
        <p>a的值是:{{numbers.a}}</p>
        <input type="button" @click="numbers.a++" value="点击">
        <p>b的值是:{{numbers.b}}</p>
        <input type="button" @click="numbers.b++" value="点击">
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
       const vm= new Vue({
            el: "#root",
            data() {
                return {
                    isHot:true,
                    numbers:{
                        a:1,
                        b:2,
                    }
                }
            },
            methods: {
                showInfo(){
                    this.isHot=!this.isHot;
                }
            },
            computed: {
                Info(){
                    return this.isHot? "炎热":"凉爽";
                }
            },
            watch:{
                Info:{
                    immediate:true,
                    handler(newvalue,oldvalue){
                        console.log('info被修改了',newvalue,oldvalue);
                    }
                },
                //监视多级结构中某个属性的变化
                /* 'numbers.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                } */
                //监视多级结构中所有属性的变化
                numbers:{//完整版写法
                    immediate:true,
                    deep:true,
                    handler(){
                        console.log('nembers改变了');
                    }
                }
                // numbers:(newvalue,oldvalue){简写版
                //     console.log('nembers改变了');
                // }
                
            }
        });
        // vm.$watch('isHot',{完整版写法
        //         immediate: true,
        //         handler(newvalue, oldvalue) {
        //             console.log('inHot被修改了', newvalue, oldvalue);
        //     }
        // })
        // vm.$watch('numbers',function(newvalue,oldvalue){简写方法
        //     console.log('nembers改变了');
        // })
    </script>

3.深度监视：

                        (1).Vue中的watch默认不监测对象内部值的改变（一层）。

                        (2).配置deep:true可以监测对象内部值改变（多层）。

 备注：

                        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

                        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。