监视属性watch，监视函数，深度监视

监视属性watch

监视属性的函数：

01_handler()函数：当isHot被修改发生改变时被调用，他有两个参数，（newValue，oldValue）

02_immediate：true 初始化时立刻执行，进行调用

<div id="root1">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>
<script>
    new Vue({
        el: "#root1",
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {
                immediate: true, //初始化时让handle进行调用
                //handler()什么时候调用？当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            }
        }
    })
</script>

watch的监听属性handler，只要数据发生改变，就会进行通知，并且能够显示新旧数据

03_深度监视：deep属性

<script>
        new Vue({
            el: "#root1",
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
​
            watch: {
                isHot: {
                    immediate: true, //初始化时让handle进行调用
                    //handler()什么时候调用？当isHot发生改变时
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了', newValue, oldValue)
                    }
                },
                //监视多级结构中某个属性的改变,即监视numbers结构中a属性的变化
                'numbers.a': {
                    handler() {
                        console.log('numbers.a改变了')
                    }
                },
                //添加一个deep:true属性，用来监视多级结构中所有属性的改变，即numbers结构中任何一个属性发生变化被可以被监视到
                numbers: {
                    deep: true,
                    handler() {
                        console.log("number发生改变了");
                    }
                }
            }
        })
    </script>

04_监视属性缩写：如果不需要immediate和deep属性，才能使用，即当watch只有handle一个配置项的时候，才能使用