Vue中watch的多種使用方法小結

更新時間：2023年10月26日 09:12:24 作者：養(yǎng)肥胖虎

Vue的watch選項提供了多種方法來觀測數(shù)據(jù)屬性的變化,讓我們能夠編寫更加優(yōu)雅和維護性更高的代碼,本文給大家介紹Vue中watch的多種使用方法小結,感興趣的朋友一起看看吧

watch的多種用法

1.屬性: 方法(最常用)

使用最廣泛的方式是將watch選項設置為一個對象，對象的屬性是要觀測的數(shù)據(jù)屬性，值是一個回調函數(shù)，該回調函數(shù)會在屬性變化時觸發(fā)。例如：

<strong>watch: {
  firstName: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}</strong>

2.屬性: 數(shù)組

你可以在一個watch選項中觀測多個數(shù)據(jù)屬性，這可以通過將要觀測的屬性放入一個數(shù)組中來實現(xiàn)。例如：

<strong>watch: {
  'person.firstName': function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  },
  'person.lastName': function(newVal, oldVal) {
    console.log('lastName changed:', newVal, oldVal);
  }
}</strong>

3.屬性: 對象

另一種觀測多個屬性的方式是使用對象。在這種情況下，對象的鍵是要觀測的屬性，值是一個包含處理函數(shù)、handler的對象。

該處理函數(shù)與屬性值的回調函數(shù)相同，用于在屬性更改時執(zhí)行組件中的邏輯。它還可以包含其他選項，例如deep和immediate。例如：

<strong>watch: {
  person: {
    handler: function(newVal, oldVal) {
      console.log('person changed:', newVal, oldVal);
    },
    deep: true
  }
}</strong>

4.屬性:字符串

還可以使用字符串指定要觀察的屬性，然后使用對應的方法名稱作為回調函數(shù)。這個選項在只有一個屬性需要觀察的情況下非常有用。例如:

<strong>watch: {
  'person.firstName': 'firstNameChanged'
},
methods: {
  firstNameChanged: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}</strong>

5.帶命名空間的watch

watch選項中可以使用字符串表示要觀測的屬性，可以使用.來訪問對象中的屬性，如'person.firstName'，但是這樣會導致處理函數(shù)與屬性名稱緊密耦合，不便于維護。

為了解決這個問題，Vue提供了一種帶命名空間的watch用法，這可以通過在watch選項中使用對象來實現(xiàn)。

對象的每個鍵都代表一個觀測的命名空間，值是觀測該命名空間下屬性的處理函數(shù)。例如：

<strong>watch: {
  person: {
    firstName: function(newVal, oldVal) {
      console.log('firstName changed:', newVal, oldVal);
    },
    lastName: function(newVal, oldVal) {
      console.log('lastName changed:', newVal, oldVal);
    }
  }
}</strong>

這里，我們可以為person對象指定兩個命名空間—firstName和lastName，這些命名空間被視為person層次結構的子命名空間。

6.$watch

除了在組件選項中設置watch屬性之外，Vue還允許你使用實例方法$watch來實現(xiàn)相同的效果。

與組件選項中設置的watch選項不同，調用$watch時可以在任何地方使用，例如在計算屬性、方法或任何其他實例方法中。例如：

<strong>created() {
  this.$watch('person.firstName', function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  })
}</strong>

7.深度觀測

在默認情況下，watch只會觀測對象的第一層屬性的變化。這意味著在對象的嵌套層次結構中更改屬性時，不會觸發(fā)處理函數(shù)。要觀測對象的深層屬性，可以在watch選項中使用deep屬性，如下所示：

<strong>watch: {
  'person.name': {
    handler: function(newVal, oldVal) {
      console.log('name changed:', newVal, oldVal);
    },
    deep: true
  }
}</strong>

在這個例子中，我們觀察person對象的name屬性，使用deep: true選項在對象深層次結構中更改屬性時仍然能夠觸發(fā)處理函數(shù)。

綜上所述，Vue的watch選項提供了多種方法來觀測數(shù)據(jù)屬性的變化，讓我們能夠編寫更加優(yōu)雅和維護性更高的代碼。

到此這篇關于Vue中watch的多種使用方法的文章就介紹到這了,更多相關vue watch使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: