目录

watch监测

提升案例：要求根据点击按钮，控制对应的div标签内部的值

天气预报案例（watch多种简写方式）及data注意事项

watch及computed区别

---

第一部分：watch监测

const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        //创建一个开关，起始值为true
                        isHot: true,
                        // 创建一个对象 内部含有其它几个变量数值
                        number: {
                            a: 1,
                            b: 2
                        }
                    }
                },
                watch: {
                    // 侦听isHot内部值得变化
                    isHot: {
                        handler(n, o) {
                            console.log(n, o)
                        }
                    },
                    // 侦听number.a内部值得变化   若是在返回值内部深层的变量时，那么我们要记得加单引号否则会不执行
                    //若是执行多个时，那么开启深层监视 deep:true
                    'number.a':{
                     handler(){
                         console.log('a的值发生了改变')
                     }
                    }
                }
            })
        

第二部分：提升案例：要求根据点击按钮，控制对应的div标签内部的值

       
        

            
            

今天天气很热{{info}}

            
            点击
            

数值改变为{{good}}

            点击后