vue watch--监视属性的使用

当data中的属性发生变化时，希望调用一个函数，这时就用到了watch。

使用场景：存在异步行为时。

举例：当用户点击某按钮时，希望执行一个函数，修改页面中的文字。

监视的是什么？

监视的是data或者computed对象中的属性。

watch是一个对象那么对象中的属性从哪里来的呢？

watch对象中的属性是data或者computed对象中的同名属性。

即监视属性full表示data对象中或者computed的full属性被监视。

当被监视属性发生变化时执行回调函数handler()。

handler（newValue，oldValue）函数

oldValue为旧值，newValue表示新值

handler()什么时候调用？

当监视的属性ishot发生变化时。

watch:{
  isHot:{
      immediate:true,//初始化时就让handler调用
       handler(newValue,oldValue){
          console.log("isHot被修改了！",newValue,oldValue)
      }
  }
}
//另外一种设置监视属性的方法
vm.$watch('isHot',{
  immediate:true,
  handler(newValue, oldValue){
      console.log("isHot被修改了！",newValue,oldValue)
  }

上述两种方式调用的条件：

1.创建vm时就知道需要监视的属性时，选择第一种方法；

2.创建vm时不知道需要监视谁的时候，选择第二种方法；

总结：

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

2.监视的属性必须存在，才可以进行监视；

3.监视属性的两种写法：newValue传入watch配置，vm.$watch()设置；

需要注意的是：监视的属性不存在时，Vue不会报错，但是打印newValue和oldValue都是undifined；

深度监视

当需要监视对象内部的属性时，需要使用深度监视

1. Vue中的watch默认不监测对象内部值的改变（一层）
2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

备注：

1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2. 使用watch时根据监视数据的具体结构，决定是否采用深度监视

监视的简写形式

如果监视属性除了handler没有其他配置项的话，可以进行简写。

 watch:{
    //正常写法
    isHot:{
    handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
    }
}, 
    //简写
    isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue,this)
}
}
//正常写法
vm.$watch('isHot',{
handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
}
})
//简写
vm.$watch('isHot',function(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
})

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第8天，点击查看活动详情”