Vue学习：监视属性-监视属性变化部分watch配置项

实现点击按钮，进行切换文字，当具有变化的时候可以在控制台进行捕获

实现天气切换部分（是因为不断修改isHot的值）

监视isHot的变化并且进行观察（watch-配置项）

     <!-- 准备容器 -->
    <div id="root">
        <!-- 但是过于麻烦使用计算属性 -->
        <h2>今天天气很{{info}},{{x}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
      new Vue({
            el: '#root',
            data: {
                isHot: true,//使用布尔值进行两个判断
                x:1,
             
            },
            computed:{
                //当有人读取 info的时候
                info(){//返回值就是info的值,必须写this拿到该属性
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            methods: {//方法
                changeWeather(){
                    //多个语句写在方发里面
                    this.isHot=!this.isHot
                    this.x++
                  
                }
              
            },
            watch:{//监视属性
                isHot:{//监视对象
                
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('isHot被修改',newValue,oldValue)
                    }

                }
               

            }

        }); 
        
    </script>

内部的handler：调用的时机：监视对象发生变化（新值，旧值）

还有其他配置项：immediate //立刻执行的，值为布尔值。默认是false。

immediate的值=true初始化的时候就会调用，一上来没有修改就没有旧的值 所以是 undefined

计算属性也可以使用watch监视

  watch:{//监视属性
                isHot:{//监视对象
                    //立刻执行的，值为布尔值。默认是false。
                    immediate:true,//true初始化的时候就会调用，一上来没有修改就没有旧的值 所以是 undefined
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('isHot被修改',newValue,oldValue)
                    }

                },
                info:{//计算属性也可以监视
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('info被修改',newValue,oldValue)
                    }
                }

            }

        }); 

通过实例对象也可以实现监视：上面的方法$watch

     const vm= new Vue({
            el: '#root',
            data: {
                isHot: true,//使用布尔值进行两个判断
                x:1,
             
            },
            computed:{
                //当有人读取 info的时候
                info(){//返回值就是info的值,必须写this拿到该属性
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            methods: {//方法
                changeWeather(){
                    //多个语句写在方发里面
                    this.isHot=!this.isHot
                    this.x++
                  
                }
              
            },
            watch:{//监视属性
                // isHot:{//监视对象
                //     //立刻执行的，值为布尔值。默认是false。
                //     immediate:true,//true初始化的时候就会调用，一上来没有修改就没有旧的值 所以是 undefined
                //     //handler调用的时机：监视对象发生变化
                //     handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                //         console.log('isHot被修改',newValue,oldValue)
                //     }

                // },
                info:{//计算属性也可以监视
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('info被修改',newValue,oldValue)
                    }
                }

            }

        }); 
        vm.$watch('isHot',{
            //handler调用的时机：监视对象发生变化
             handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                console.log('isHot被修改',newValue,oldValue)
            }
        })

如何选择使用哪种方法

创建实例的时候就已经确定需要监视的对象就使用：watch这个配置

但是创建实例不知道监视谁根据用户的行为确定监视的对象，就是要api

监视属性watch总结

1. 当监视属性变化时候，回调函数handler自动调用，进行相关操作

2. 监视属性必须存在才可以监视

3. 监视的两种方法：1、new Vue时候传入watch配置2、通过 vm.$watch监视