vue 监听变量或对象

注意：监听的对象必须已经在data中声明了, 默认初始化不执行watch，若需要立即执行需要带参数的watch并设置immediate:true

 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)
    },
    // string method name
    b: 'someMethod',
    // deep watcher 
    e: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // the callback will be called immediately after the start of the observation
    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

　　比如下面例子

//监听某个变量
watch: {
    bet(newValue, oldValue) {
        console.log(newValue);
    }
}
//监听对象 某一个属性
watch: {
  'bet.text': function (val, oldVal) {}
}

//监听 整个对象（数组）
serviceList:{
            handler(){   //注意此处就是handler,不能修改函数名
                console.log(this.serviceList);
            },
            deep:true, 
            immediate: true // watch 的一个特点是，最初绑定的时候是不会执行的，要等到 serviceList 改变时才执行监听计算。加上改字段让他最初绑定的时候就执行
        },

　　

对于vue的深层对象数组的监控 可能不能得到及时的刷新 直接对比oldVal 和newVal时可能对比不出变化来，若想根据具体值的变化 而对内部其他的参数赋值 需要在nextTick里面进行，比如：

deep1.pars  pars 是 [{min:'',max:'',fix:''},{min:'',max:'',fix:''}]

需求时pars数组的第一项的max的变化修改第二项的min值等于第一项的max 通过监控deep1.pars的变化 对内部元素赋值时需要使用nextTick

但是建议若是min和max是用户触发的 可以使用change事件去监控变化并且做相应的修改操作