09-监视属性

<div id="root">
    <h2>今天天气很{{info}},{{x}}</h2>
    <!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
    <!-- <button @click="this.isHot = !this.isHot;x++;window.alert(x)">切换天气</button> -->
    <button @click="changeWeather">切换天气</button>

</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            x: 1,
            // window
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
                this.x++
            }
        },
    })
</script>

 <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>

</div>
<script>
    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调用一下
        //         // handler什么时候调用？当isHot发生改变时
        //         handler(newValue, oldValue) {
        //             console.log('isHot被调用了', newValue, oldValue)
        //         }
        //     }

        // }

    })

    vm.$watch('isHot', {
        immediate: true,//初始化时让handler调用一下
        // handler什么时候调用？当isHot发生改变时
        handler(newValue, oldValue) {
            console.log('isHot被调用了', newValue, oldValue)
        }
    })
</script>

 <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <h2>a的值是{{numbers.a}}</h2>
    <button @click="numbers.a++">点我a++</button>
    <h2>b的值是{{numbers.b}}</h2>
    <button @click="numbers.b++">点我b++</button>
    <button @click="numbers={a:666,b:888}">点我彻底替换numbers</button>
    <h2>e的值是{{numbers.c.d.e}}</h2>
    <button @click="numbers.c.d.e++">点我e++</button>
</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 2,
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        },
        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() {
            //         console.log('a被改变了')
            //     }
            // },
            // 监视多级结构中所有属性的改变
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers被改变了')
                }
            }


        }

    })
</script>

 <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>
<script>
    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调用一下
                 deep: true,//深度监视
                 // handler什么时候调用？当isHot发生改变时
                 handler(newValue, oldValue) {
                     console.log('isHot被调用了', newValue, oldValue)
                 }
             },*/
            //简写
            /*isHot(newValue, oldValue) {
                console.log('isHot被调用了', newValue, oldValue)
            }*/

        }

    })

    //正常写法 
    /*vm.$watch('isHot', {
        immediate: true,//初始化时让handler调用一下
        // handler什么时候调用？当isHot发生改变时
        handler(newValue, oldValue) {
            console.log('isHot被调用了', newValue, oldValue)
        }
    })*/
    // 简写
    vm.$watch('isHot', function (newValue, oldValue) {
        console.log('isHot被调用了', newValue, oldValue)
    })
</script>