1. 侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。
      2. 监视属性变化时需要使用 watch 配置项。
      使用 watch 实现：比较数字大小的案例
      1. <div id="app">
      2. <h1>{{msg}}</h1>
      3. 数值 1：<input type="text" v-model="number1"><br>
      4.  数值 2：<input type="text" v-model="number2"><br>
      5.  比较大小：{{compareResult}}
      6. </div>
      7. <script>
      8. const vm = new Vue({
      9.  el : '#app', 10. data : {
      10.    msg : '侦听属性的变化', 12. number1 : 1, 13. number2 : 1, 14. compareResult : '' 15. }, 16. watch : {
      11.    number1 : {
      12.      immediate : true, 19. handler(newVal, oldVal){
      13.        let result = newVal - this.number2
      14.        if(result > 0){
      15.          this.compareResult = newVal + '>' + this.number2
      16.        }else if(result < 0){
      17.          this.compareResult = newVal + '<' + this.number2
      18.        }else{
      19.          this.compareResult = newVal + '=' + this.number2
      20.        }
      21.      }
      22.    }, 30. number2 : {
      23.      immediate : true, 32. handler(newVal, oldVal){
      24.        let result = this.number1 - newVal
      25.        if(result > 0){
      26.          this.compareResult = this.number1 + '>' + newVal
      27.        }else if(result < 0){
      28.          this.compareResult = this.number1 + '<' + newVal
      29.        }else{
      30.          this.compareResult = this.number1 + '=' + newVal
      31.        }
      32.      }
      33.    }
      34.  }
      35. })
      36. </script>
      运行效果：
      image.png
      image.png
      image.png
      3. 如何深度监视：
      (1) 监视多级结构中某个属性的变化，写法是：’a.b.c’ : {}。注意单引号哦。
      (2) 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true
      4. 如何后期添加监视：
      (1) 调用 API：vm.$watch(‘number1’, {})
      5. watch 的简写：
      (1) 简写的前提：当不需要配置 immediate 和 deep 时，可以简写。
      (2) 如何简写？
      ① watch:{ number1(newVal,oldVal){}, number②(newVal, oldVal){} }
      (3) 后期添加的监视如何简写？
      ①vm.$watch(‘number1’, function(newVal, oldVal){})
      6. computed 和 watch 如何选择？
      (1) 以上比较大小的案例可以用 computed 完成，并且比 watch 还要简单。所以要遵守一个原则： computed和 watch 都能够完成的，优先选择 computed。
      (2) 如果要开启异步任务，只能选择 watch。因为 computed 依靠 return。watch 不需要依赖 return。
      7. 关于函数的写法，写普通函数还是箭头函数？
      (1) 不管写普通函数还是箭头函数，目标是一致的，都是为了让 this 和 vm 相等。
      (2) 所有 Vue 管理的函数，建议写成普通函数。
      (3) 所有不属于 Vue 管理的函数，例如 setTimeout 的回调函数、Promise 的回调函数、AJAX 的回调函数， 建议使用箭头函数。