Vue中的侦听器

 <div id="app">
    <input type="text" name="" id="" v-model="username">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        username: "admin"
      },
      // 所有的侦听器，都应该被定义到   watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监听哪个数据的变化，就把数据作为方法名即可
        // 新值在前，旧值在后
        username (newval) {
          // console.log(newval);
          if (newval == '') {
            return
          }
          // 1.调用jquery中的Ajax发起请求，判断 newval  是否被占用！！
          $.get("https://www.escook.cn/api/finduser/" + newval, function (result) {
            console.log(result);
          })

        }
      },
      methods: {}
    });
    // 侦听器的格式
    // 1.方法格式的侦听器
          // 缺点：无法在刚进入页面的时候，自动触发
    // 2.对象格式的侦听器
          // 好处：可以通过  immediate选项，让侦听器自动触发
  </script>

<div id="app">
    <input type="text" name="" id="" v-model="username">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        username: "admin"
      },
      // 所有的侦听器，都应该被定义到   watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler (newval, oldval) {
            console.log(newval, oldval);
          },
          // immediate  选项的默认值是false 
          // Immediate 的作用是：控制侦听器是否自动触发一次
          immediate: true
        }

      },
      methods: {}
    });
</script>
    // 侦听器的格式
    // 1.方法格式的侦听器
          // 缺点：无法在刚进入页面的时候，自动触发
    // 2.对象格式的侦听器
          // 好处：可以通过  immediate选项，让侦听器自动触发

<div id="app">
    <input type="text" name="" id="" v-model="info.username">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        // 用户信息的对象
        info: {
          username: "admin"
        }
      },
      // 所有的侦听器，都应该被定义到   watch 节点下
      watch: {
        /* info (newval) {
          console.log(newval);
        } */
        /*      info: {
               handler (newval) {
                 console.log(newval);
               },
               // 开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
               deep:true
             } */
        //  如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username' (newval) {
          console.log(newval);
        }
      },
      methods: {}
    });
    // 侦听器的格式
    // 1.方法格式的侦听器
          // 缺点：无法在刚进入页面的时候，自动触发
          // 缺点：如果侦听器是一个对象，如果对象中的属性发生了变化，不会触发侦听器
    // 2.对象格式的侦听器
          // 好处：可以通过  immediate选项，让侦听器自动触发
          // 好处：可以通过  deep选项，让侦听器深度监听对象中每个属性的变化
  </script>