vue 監聽變量或對象

注意：監聽的對象必須已經在data中聲明了

 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事件去監控變化並且做相應的修改操作