day59-监视属性

监视属性

普通写法，监视天气

 <body>
 <div id="root">
     <h2>今天天气很{{info}}</h2>
     <button @click="isHot = !isHot">change</button>
 
 </div>
 
 </body>
 <script type="text/javascript">
     Vue.config.productionTip = false
 
     new Vue({
         el:'#root',
         data:{
             isHot:true
         },
         computed:{
             info(){
                 return this.isHot?'炎热':'凉爽'
             }
         },
         methods:{
             // change(){
             //     this.isHot = !this.isHot
             // }
         }
     })
 </script>

监视属性

watch设置监视属性，watch中设置要监视的对象，其中编写handler回调函数

watch:{
             info:{
                 handler(newvalue,oldvalue){
                     //当isHot改变的时候调用
                     console.log("ishot change",newvalue,oldvalue)
                 },
                 immediate:true//初始化是调用handler
             }
         }

另一种方式：通过实例化vm，使用vm.$watch调用

vm.$watch('isHot',{
    handler(newvalue,oldvalue){
        //当isHot改变的时候调用
        console.log("ishot change",newvalue,oldvalue)
    },
    immediate:true//初始化是调用handler
})

总结：

 <!--
     监视属性watch：
         1.当监视属性的值发生变化时，回调函数自动调用，进行相关操作
         2.监视的属性必须存在，才能进行监视。
         3.监视的两种写法：
             new Vue时传入watch配置
             通过vm.$watch配置
 -->

深度监视

<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>

//监视多个结构中某个属性变化
 'numbers.a':{
     deep:true,
     handler(newvalue, oldvalue) {
         console.log("a change")
     }
 }

总结：

 <!--
     深度监视：
         1.vue中的watch默认不监测对象内部值的改变（一层）
         2.配置deep：true可以监测对象内部的改变（多层）
     备注：
         1.vue自身可以监测对象内部值的改变，但vue提供的watch默认不检测
         2.使用watch时根据数据的具体结构，决定是否采用深度监测
 -->

over