类型：{ [key: string]: string | Function | Object | Array }

详细：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },

  
  
   方法名
    b: 'someMethod',
     深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
     该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1
注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

<div id="app">
    <input type="text" v-model="a">
    {{msg}}
    <!--根据输入框的内容 算出一个错误信息-->
    <!--当给A赋值的时候影响了 错误信心的改变 错误的-->
</div>

<script>
    let vm=new Vue ({    //如果写看set方法，并且val给了别人，那当前的a就不会被赋值结果了
        el:"#app",
        data:{a:"",msg:""},
        watch:{  //只有当值变化时才会触发  支持异步了
            a(newVal,oldVal){   //watch的属性名要和观察者的名字一样
             setTimeout(()=>{
                 if(newVal.length<3){
                     return this.msg="少"
                 }
                 if(newVal.length>6){
                     return this.msg="多"
                 }
                 this.msg="";
             },1000)
            }
        }
    })
</script>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的watch方法详解