【侦听器】

1.watch 侦听器：允许开发者监视数据的变化，从而针对数据的变化做特定的操作

2.格式：3.对应变化：

4.注意：

        所有的侦听器，都应该被定义到 watch 节点下

        侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可

        新值在前，旧值在后

5.应用：

//想要监听谁的变化，就把那个函数作为函数名即可。

 username(newVal) {

          if (newVal === '') return

          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！

          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {

            console.log(result)

          })

        }

6.改进：immidiate选项

侦听器的格式：

1）对象格式的侦听器：

        优点1：通过immidiate选项，让侦听器自动触发

        优点2：可以通过deep选项让监听器深度监听对象中每个属性的变化

        下面的例子在deep监听对象的基础上，会直接监听到对象属性的变化

              data: {

        // 用户的信息对象

        info: {

          username: 'admin',

          address: {

            city: '北京'

          }

        }

      },

      // 所有的侦听器，都应该被定义到 watch 节点下

      watch: {

        /* info: {

          handler(newVal) {

            console.log(newVal)

          },

          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”

          deep: true

        } */

        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号

        'info.username'(newVal) {

          console.log(newVal)

        }

      }

    })

2）方法格式的侦听器：

        缺点1：无法在进入网页时自动触发侦听器（一般用方法格式，按需求选择对象格式）

        缺点2：如果监听的是一个对象，如果对象中的属性发生变化，不会触发侦听器。

     例子：

        <input type="text" v-model="info.username">     

        data: {

        // 用户的信息对象

        info: { username: 'admin'}

    3)对象格式的侦听器：

watch: {

        // 定义对象格式的侦听器（username)

        username: {

          // handle是侦听器的处理函数

          handler(newVal, oldVal) {

            console.log(newVal, oldVal)

          },

          // immediate 选项的默认值是 false,如果是true就会自动触发

          // immediate 的作用是：控制侦听器是否自动触发一次！

          immediate: true

        }

      }