侦听器就是侦听data中的数据变化，如果数据一旦发生变化就通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。
但是，侦听器也有自己独有的应用场景。
执行异步或开销较大的操作。
下面，先来看一下侦听器的基本使用
我们使用侦听器来统计总人数。
<p>总人数：{
{totalCount}}</p>在data中定义totalCount属性。
data: {selectItem: "",num: 100,totalCount: 0} 使用watch来监听users数组的数据变化。
watch: {users: {immediate: true, //立即执行handler(newValue, oldValue) {this.totalCount = newValue.length + "个人";},},}当users数组发生了变化后，就会执行handler这个函数，同时用于加上了immediate属性，并且该属性的值为true，表示的就是在初始化绑定的时候，也会去执行侦听器。因为watch在初始化绑定的时候是不会执行的，等到所监听的内容改变之后才会去侦听执行。
以上就是watch侦听器的基本使用，但是通过这个案例，我们发现还是使用计算属性来统计总人数更加的方便一些。
当然，侦听器有自己的应用场景，它的应用场景就是在执行异步请求或者进行开销比较大的操作的时候，会使用侦听器。
下面我们在通过一个案例，来体会一下watch侦听器的应用场景。
下面我们来看一个异步操作的情况。就是当用户在一个文本框中输入了用户名以后，要将输入的用户名发送到服务端，来检查该用户名是否已经被占用。
具体的实现代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>侦听器</title></head><body><div id="app"><div><span>用户名</span><!--这里使用了lazy,保证当文本框失去焦点后，才去执行对应操作--><span><input type="text" v-model.lazy="uname" /></span><span>{
{message}}</span></div></div><script src="./vue.js"></script><script>const vm = new Vue({el: "#app",data: {uname: "",message: "",},methods: {checkUserName: function (userName) {let that = this;setTimeout(function () {if (userName === "admin") {that.message = "用户名已经存在,请更改....";} else {that.message = "该用户名可以使用.....";}}, 3000);},},watch: {uname: function (value) {//调用后台接口，来验证用户名是被占用this.checkUserName(value);this.message = "正在校验用户名....";},},});</script></body>
</html>以上的案例，就是通过watch来监听uname的值是否发生变化，如果发生了变化，就通过发送异步请求来检查uname中的值，是否已经被占用。
通过以上的案例：我们可以看到watch是允许异步操作的，并且在我们得到最终的结果前，可以设置中间状态，这些都是计算属性无法做到的。
最后我们把计算属性与侦听器做一个总结，看一下它们的应用场景。
第一点：语境上的差异：
watch适合一个值发生了变化，对应的要做一些其它的事情，适合一个值影响多个值的情形。
例如，上面案例中的用户名检测，这里是一个uname发生了变化，但是这里做了很多其它的事情，例如修改message的值，发送异步请求。
而计算属性computed:一个值由其它的值得来，其它值发生了变化，对应的值也会变化，适合做多个值影响一个值的情形。
例如如下代码：
computed:{fullName(){return this.firstName+' '+this.lastName}
}第二点：计算属性有缓存性。
由于这个特点，我们在实际的应用中，能用计算属性的，会首先考虑先使用计算属性。
第三点：侦听器选项提供了更加通用的方法，适合执行异步操作或者较大开销操作。