语法格式
const vm = new Vue({
  el: '#app',
  data: {username: ''},
  // 所有侦听器都要定义在watch节点之下
  watch: {
    // 监听 username值的变化
    // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
    // newVal是"变化后的新值", oldVal是"变化之前的旧值"
    username(newVal, oldVal){
      console.log(newVal, oldVal)
    }
  }
})

const vm = new Vue({
  el: '#app',
  data: {username: 'admin'},      // username带默认值
  // 所有侦听器都要定义在watch节点之下
  watch: {
    // 监听 username值的变化
    username: {
      // 侦听器的处理函数handler，当username发生变化时被调用
      handler(newVal, oldVal){
      },
      immediate: true       // immediate属性，默认值为false，当为true时进入页面会立即执行一次侦听器
    }
  }
})

// 在vm实例的外面
vm.$watch('属性名称', {
  // 配置对象
})
// 示例：监听username
vm.$watch('username', {
  immediate: true,
  handler(newVal, oldVal){
    console.log(newVal, oldVal)
  }
})

<div id="app">
  <input type="text" v-model="info.username">   <!-- 注意这里不能直接写username，因为data里面就没有username这个属性 -->
</div>

const vm = new Vue({
  el: '#app',
  data: {
    // 用户的信息对象
    info: {
      username: 'admin',
      pwd: 666666
    }
  },      
  watch: {
    // 监听info对象的变化
    info: {
      handler(newVal){
        console.log(newVal)
      },
      deep: true  // 开启深度侦听，只要对象中任意一个属性发生变化，就会触发 对象的侦听器
    } ,
    // 也可以直接侦听对象中某一子属性的变化，但必须用单引号包裹(其实每个属性都是引号包裹的，只不过那些都省略了)
    'info.username'(newVal){
      console.log(newVal)
    }
  }
})