Vue watch用法詳解

一、watch的基本使用

Vue.js提供了一種非常方便的方法來觀察和響應Vue實例上的數據變化。通過使用watch選項來觀察特定的數據屬性，當該屬性發生變化時，將自動執行所指定的回調函數。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('message變化了！新值為：' + newValue + '，舊值為：' + oldValue);
    }
  }
})

使用watch選項時，需要傳入一個對象，該對象的屬性是被觀察的數據屬性，其值為一個回調函數。當被觀察的屬性發生變化時，Vue.js會自動調用該回調函數，並將被觀察屬性的新值和舊值作為參數傳遞給該函數。

二、深度watch

在Vue.js中，如果我們想要監聽某個對象的所有屬性變化而不是只監聽該對象的引用變化，則可以使用深度watch功能。

new Vue({
  data: {
    userInfo: {
      name: 'Tom',
      age: 20
    }
  },
  watch: {
    userInfo: {
      handler: function(newValue, oldValue) {
        console.log('userInfo變化了！新值為：' + JSON.stringify(newValue) + '，舊值為：' + JSON.stringify(oldValue));
      },
      deep: true
    }
  }
})

通過在watch選項中指定deep屬性為true，就可以開啟深度觀察功能，Vue.js會遞歸地觀察對象內部所有的屬性，當任何一個屬性發生變化時，都會觸發回調函數。

三、立即觸發watch

有時候，在Vue.js中我們需要在watch被定義時就立即執行一次回調函數，可以在watch選項中使用immediate屬性來實現。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: {
      handler: function(newValue, oldValue) {
        console.log('message變化了！新值為：' + newValue + '，舊值為：' + oldValue);
      },
      immediate: true
    }
  }
})

當immediate屬性被設置為true時，Vue.js會在watch定義時立即執行一次回調函數，並傳遞當前數據屬性的新值和舊值。

四、計算watch

有些時候，我們需要基於多個數據屬性計算出一個新的屬性，並在該屬性發生變化時執行回調函數。可以在watch選項中使用deep屬性為false的計算watch實現。

new Vue({
  data: {
    firstName: 'Tom',
    lastName: 'Smith'
  },
  watch: {
    fullName: function(newValue, oldValue) {
      console.log('fullName變化了！新值為：' + newValue + '，舊值為：' + oldValue);
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在這個示例中，我們已經定義了一個計算屬性fullName，該屬性會基於firstName和lastName計算出一個新的值。在watch選項中，我們觀察了該計算屬性，當其發生變化時，就會調用該回調函數。

五、非同步watch

有些時候，watch回調函數會觸發非同步操作，我們可以在watch選項中指定一個回調函數，該函數會在非同步操作結束後被調用。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: {
      handler: function(newValue, oldValue) {
        var vm = this;
        setTimeout(function() {
          console.log('message變化了！新值為：' + newValue + '，舊值為：' + oldValue);
          vm.asyncOperation();
        }, 1000);
      },
      immediate: true
    }
  },
  methods: {
    asyncOperation: function() {
      console.log('執行非同步操作');
    }
  }
})

在這個示例中，watch回調函數使用了setTimeout模擬非同步操作，在非同步操作結束後調用了vm.asyncOperation方法。

六、總結

通過本文的介紹，我們可以看到Vue.js中watch用法非常靈活，可以滿足大部分的數據觀察和響應需求。我們可以根據具體的場景，採用不同的watch選項來完成我們想要的功能。