Vue中的监视属性

一、监视属性的使用

（一）配置watch进行监视

当我们想要监视一个属性改变的时候就可以使用监视属性监视其变化并进行操作。

语法格式如下：

watch:{

        监视属性名称 : {  // 监视属性的配置项  }

}

1. handler函数

当监视的属性发生变化时就调用了handler函数。

handler函数语法格式如下：

 handler(newValue, lodValue) {  // 监视操作  }

简单写一个点击按钮改变性别，并监听isW的变化 ：

 

 

2.  immediate配置项

因为第一次调用的时候没有旧的值，所以oldValue为undefined。

3. deep深度监视 

Vue可以检测对象内部值的变化，但是Vue提供的watch默认是不行的。

想要watch能够检测到数据深层次的变化，就要开启深度监视：

（二）配置$watch进行监视

语法格式：

vm.$watch("监视属性名称", {  // 配置项 })

  

二、监视属性的简写

什么情况下可以简写？

不使用immediate和deep配置项只使用handle函数的情况下才可以简写。

我们以上面改变性别的例子对两种写法进行简写：

 注意：如上形式中的函数不能写成箭头函数。

三、计算属性和监视属性的区别

1. computed能实现的watch都能实现。

2. watch能实现的，computed不一定能实现，如：在watch中执行异步任务