1. 程式人生 > >vue中的watch監聽方法

vue中的watch監聽方法

watch在vue的文件中是這樣解釋的。

一個物件,鍵是需要觀察的表示式,值是對應回撥函式。值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch(),遍歷 watch 物件的每一個屬性。

值是包括選項的物件:選項包括有三個。

第一個handler:其值是一個回撥函式。即監聽到變化時應該執行的函式。
第二個是deep:其值是true或false;確認是否深入監聽。(一般監聽時是不能監聽到物件屬性值的變化的,陣列的值變化可以聽到。)
第三個是immediate:其值是true或false;確認是否以當前的初始值執行handler的函式。

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   //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