一、深度监视

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 深度监视：
            1、Vue中的watch默认不监测对象内部值的变化(一层)。
            2、配置deep：true，可以监测对象内部值改变（多层）。
        备注：
            1、Vue自身可以监测到对象内部值的改变，但Vue提供的watch默认不可以！
            2、使用watch时根据数据的具体结构，决定是否采用深度监视。
    -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- <h2>今天天气很一般</h2> -->
        <button @click="changeWeather">切换天气</button>
        <hr/> 
        <h3>a的值是{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a加1</button>
        <hr/> 
        <h3>b的值是{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b加1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue 在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                // immediate:true,//初始化时让handler调用一次
                //handler什么时候调用：当isHot发生变化时
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            // //监视多级结构中，某个属性的变化
            // 'numbers.a':{
            //     handler(newValue,oldValue){
            //         console.log("a被修改了")
            //     }
            // },
            //这里的numbers是指：numbers这个key对应的地址，而不是里面的值
            // numbers:{
            //     handler(){
            //         console.log('numbers的指向的地址发生了变化')
            //     }
            // },
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers的任一值发生变化时，触发')
                }
            }
        }
    })
</script>
</html>

二、监视简写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue 在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            // //正常写法
            // isHot:{
            //     // immediate:true,//初始化时让handler调用一次
            //     // watch:true,//深度监视
            //     //handler什么时候调用：当isHot发生变化时
            //     handler(newValue,oldValue){
            //         console.log('isHot被修改了',newValue,oldValue)
            //     }
            // }

            //简写
            // isHot(newValue,oldValue){
            //     console.log('isHot被修改了',newValue,oldValue)
            // }
        }
    })

    //完整写法
    // vm.$watch = this.$watch('isHot',{
    //     immediate:true,
    //     deep:true,
    //     handler(newValue,oldValue){
    //         console.log('isHot被修改了',newValue,oldValue)
    //     }
    // });

    //简写
    vm.$watch('isHot', function (newValue, oldValue) {
        console.log('isHot被修改了',newValue,oldValue)
    });
</script>
</html>