Vue监视属性

vue监视属性

天气小案例,通过改变ishot的值来进行切换，所有只有对isHot的值进行监视，当isHot发生改变时则进行一些变化

监视属性(watch)与计算属性配置类似

使用handler()方法对该属性监视,改变时就会被调用

而且还可以监视到新的值与旧的值handle(newValue，oldValue)

                               可以发现 Vue能监视计算属性

当然计算属性还有第二种写法，第一中写vue实例中，第二种不写vue实例中

第一种:

<script>
watch :{


isHot:{

             hander(){

           }
 
      }


}

</sript>

第二种:

<script>
 // vm.$watch($isHot)   api
vm.$watch('isHot',{
              immediate:true,  //初始化时让handler调用一下
              handler(newValue,oldValue){
                  console.log('isHot被修改了',newValue,oldValue)
              }
           
          })
</script>

可以发现：

当监视的属性发生变化时，回调函数自动调用，进行相关操作

   监视属性必须存在才能监视！！！

   监视属性的写法

   （1）.new Vue时传入watch配置

    (2)通过vm.$watch配置

vue中的深度监视

1.Vue中的watch默认不监视内部值的改变

2.需要配置deep:true可监测对象内部的值