一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象

demo1

<template>
  <div>
    <h2>watch学习</h2>
        <input type="text" v-model="test" placeholder="请输入值"/>
        <p>{{watchValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: '',
      watchValue: ''
    }
  },
  watch: {
    test(newvalue, oldValue) {
      this.watchValue = newvalue
    }
  }
}
</script>

demo2 --- 深度监听

该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深

<template>
  <div>
    <h2>watch学习</h2>
        <input type="text" v-model="form.test" placeholder="请输入值"/>
        <p>{{watchValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        test: ''
      },
      watchValue: ''
    }
  },
  watch: {

    // 方式一
    // 'form.test'(newvalue, oldValue) {
    //   this.watchValue = newvalue
    // }

    // 方式二
    form: {
      handler(newvalue, oldValue) {
        console.log('watch', newvalue)
        this.watchValue = newvalue.test // 这里获取的是属性值
      },
      deep: true
    }
  }
}
</script>

<template>
  <div>
    <h2>watch学习</h2>
        <input type="text" v-model="form.test" placeholder="请输入值"/>
        <p>{{watchValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        children: {
          test: ''
        }

      },
      watchValue: ''
    }
  },
  watch: {

    // 方式一  多层嵌套并没有效果,此时监听无效
    'form.children.test'(newvalue, oldValue) {
      this.watchValue = newvalue
    }

    // 方式二  监听器会一层层的往下遍历
    // form: {
    //   handler(newvalue, oldValue) {
    //     console.log('watch', newvalue)
    //     this.watchValue = newvalue.test // 这里获取的是属性值
    //   },
    //   deep: true
    // }
  }
}
</script>