watch的多種用法

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

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

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

2.屬性: 數(shù)組

你可以在一個(gè)watch選項(xiàng)中觀測(cè)多個(gè)數(shù)據(jù)屬性，這可以通過(guò)將要觀測(cè)的屬性放入一個(gè)數(shù)組中來(lái)實(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.屬性: 對(duì)象

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

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

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

4.屬性:字符串

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

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

5.帶命名空間的watch

watch選項(xiàng)中可以使用字符串表示要觀測(cè)的屬性，可以使用.來(lái)訪問(wèn)對(duì)象中的屬性，如'person.firstName'，但是這樣會(huì)導(dǎo)致處理函數(shù)與屬性名稱緊密耦合，不便于維護(hù)。

為了解決這個(gè)問(wèn)題，Vue提供了一種帶命名空間的watch用法，這可以通過(guò)在watch選項(xiàng)中使用對(duì)象來(lái)實(shí)現(xiàn)。

對(duì)象的每個(gè)鍵都代表一個(gè)觀測(cè)的命名空間，值是觀測(cè)該命名空間下屬性的處理函數(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對(duì)象指定兩個(gè)命名空間—firstName和lastName，這些命名空間被視為person層次結(jié)構(gòu)的子命名空間。

6.$watch

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

與組件選項(xiàng)中設(shè)置的watch選項(xiàng)不同，調(diào)用$watch時(shí)可以在任何地方使用，例如在計(jì)算屬性、方法或任何其他實(shí)例方法中。例如：

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

7.深度觀測(cè)

在默認(rèn)情況下，watch只會(huì)觀測(cè)對(duì)象的第一層屬性的變化。這意味著在對(duì)象的嵌套層次結(jié)構(gòu)中更改屬性時(shí)，不會(huì)觸發(fā)處理函數(shù)。要觀測(cè)對(duì)象的深層屬性，可以在watch選項(xiàng)中使用deep屬性，如下所示：

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

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

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

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

最新評(píng)論