Vue监视属性----watch

监视属性watch:

当监视属性发生变化的时候，回调函数自动调用，进行相关的操作。
监视的属性必须存在才能进行监视
监视属性的两种写法：

• （1）在new Vue里面传入watch配置
• （2）通过vm.$watch进行监视。

监视属性的第一种写法：

watch:{
  //这里监视的是data中的isHot也可以检测计算属性computed里面的info
  isHot:{
    immediate:true,//初始化(页面刷新)的时候调用一下Handler
    //函数（isHot发生改变的时候会被调用。）
    handler(newValue,oldValue){
      console.log("新的值：",newValue)
      console.log("isHot被修改了。")
      console.log("旧的值",oldValue)
    }
  }
}

isHot是data里面的一个属性
immeditate:true设置为true，页面初始化的时候调用一下Handler
在其他时间，当监视属性发生改变的时候，才会调用Handler函数。
handler()函数的两个参数：第一个参数是监视属性发生改变之后的新的值，第二个参数是监视属性发生过能改变之后的旧的值

监视属性的第二种写法：(创建出来vm实例对象，然后再vm实例对象上进行绑定。)

vm.$watch('isHot',{
  immediate:true,//初始化(页面刷新)的时候调用一下Handler
      //函数（isHot发生改变的时候会被调用。）
      handler(newValue,oldValue){
        console.log("新的值：",newValue)
        console.log("isHot被修改了。")
        console.log("旧的值",oldValue)
      }
})

深度监视：

监视的属性是一个对象，对象里面还有属性的时候。 比如：data里面的属性。

numbers:{
  a:1,
  b:1
}

传统的监视属性，监视numbers的话不会检测到变化。 所以我们要添加一个deep:true

numbers:{
  deep:true,//检测到number里面的属性的变化。
  handler(){
    console.log("numbers改变了")
  }
}

检测number对象里面的属性。

//如果key的值是单个的单词的话就可以不加单引号。(事实上key的值都是添加单引号的，一个单词的时候可以将单引号省略。)
//监视多级属性中的某个属性的变化
'numbers.a':{
  handler(newValue, oldValue) {
    console.log("a改变了")
  }
}