exercises.md

# 侦听器

 <div style="color: pink;">小常识：</div>

```javascript
<body>
  <div id="app">
    <!-- {{ message }}<br>
    您的银行卡余额为{{b}} -->

    <p>请输入你的幸运数字</p>
    <input type="text" v-model="num">
    <p>{{text}}</p>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '你好，几何心凉!',
      a: 3,
      num: '',
      text: '',
    },
    computed: {
      b: function () {
        return this.a + 1;
      }
    },
    watch: {
      num: function (n, o) {
        this.text = '你刚才选择了数字' + o + '，，，你现在又选择了' + n + '，，，我认为' + n + '更好'
      },
    },
  })
</script>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8f1a8bee02416aab90c4ee26534dc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)


前面我们看到了计算属性的强大，现在为大家介绍另一彪悍——侦听器，小编编写了上面代码，随着我们在输入框中输入数字的变化，文本框下面会出现一段话，而且会甄别出我们刚刚输入的值，以及当前输入的值，所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据，而侦听器会检测到我们数据的变化，我们就可以完成很多业务逻辑，思考下：他们两者可以互通使用么？
<br>

 <div style="color: pink;">小测试：</div>

下列关于watch的说法不正确的是？<br/><br/>

## 答案

watch 不支持异步

## 选项

### A

watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作

### B

监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据

### C

为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听