vue怎么使用watch監(jiān)聽屬性

這篇文章主要介紹了vue怎么使用watch監(jiān)聽屬性的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue怎么使用watch監(jiān)聽屬性文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

基本用法

Vue watch最重要的使用場(chǎng)景是根據(jù)某屬性的變化執(zhí)行某些業(yè)務(wù)邏輯:

<template>
  <input type="number" v-model.number="counter" />
</template>

<script>
export default {
  name: "Counter",
  data: function() {
    return {
      counter: 0,
    };
  },
  watch: {
    counter: function(newV, oldV) {
      console.log('counter change to %d from %d', newV, oldV);
    },
  }
};
</script>

watch的基本用法很簡(jiǎn)單：針對(duì)需要監(jiān)聽的屬性定義個(gè)同名的函數(shù)即可，函數(shù)的第一個(gè)參數(shù)為變化后的值，第二個(gè)參數(shù)為變化前的值。

監(jiān)聽object

首先我們回顧一個(gè)JavaScript中的概念：復(fù)雜數(shù)據(jù)變量。“復(fù)雜”的原因在于變量只是一個(gè)引用，和C++中的指針類似，其保存的不是真實(shí)的數(shù)據(jù)，而是數(shù)據(jù)的地址。

比如對(duì)于一個(gè)object變量來(lái)說，添加屬性、刪除屬性、修改屬性的值都不會(huì)改變這個(gè)地址，這也可以說這個(gè)object變量沒有變化。

不管所用的框架如何，基本定理肯定是生效的，所以Vue中監(jiān)聽object也是一難題，特別是嵌套數(shù)據(jù)的監(jiān)聽。

這里的變化指的是地址的變化，能夠觸發(fā)變化最簡(jiǎn)單的方式就是重新賦值。

<template>
  <div>
    <label>up trigger {{ counter.up }} times</label>
    <button @click="onTrigger('up')">Trigger Up</button>
    <br>
    <label>down trigger {{ counter.down }} times</label>
    <button @click="onTrigger('down')">Trigger down</button>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data: function() {
    return {
      counter: {
        up: 0,
        down: 0,
      },
    };
  },
  methods: {
    onTrigger: function(type) {
      this.counter[type] += 1;
    }
  },
  watch: {
    counter: function(newV, oldV) {
      // 不會(huì)被觸發(fā)
      console.log('counter change to %o from %o', newV, oldV);
    },
  }
};
</script>

針對(duì)counter的監(jiān)聽不會(huì)被觸發(fā)，因?yàn)閠his.counter[type] += 1;并不會(huì)使this.counter變化（地址沒變）。那如果想要監(jiān)聽到這個(gè)變化應(yīng)該怎么辦呢？一般來(lái)說有兩種方式：

使用deep參數(shù)

watch: {
  counter: {
    handler: function(newV, oldV) {
      console.log('counter change to %o from %o', newV, oldV);
    },
    deep: true,
  }
}

使用deep需要使用watch的完整形式：handler是監(jiān)聽回調(diào)函數(shù)，deep: true指定了不僅僅監(jiān)聽counter的變化，也監(jiān)聽其內(nèi)部屬性的變化，所以當(dāng)counter.up或counter.down變化時(shí)才能出發(fā)handler回調(diào)。

重新賦值

methods: {
  onTrigger: function(type) {
    // 重新賦值觸發(fā)變化
    this.counter = {
      ...this.counter,
      [type]: this.counter[type] + 1,
    };
  }
},
watch: {
  counter: function(newV, oldV) {
    // 不會(huì)被觸發(fā)
    console.log('counter change to %o from %o', newV, oldV);
  },
}

那兩種方式優(yōu)劣如何呢？使用deep參數(shù)會(huì)為數(shù)據(jù)每一層都添加監(jiān)聽，當(dāng)層級(jí)較深時(shí)比較耗費(fèi)性能，而且Vue不能監(jiān)聽到屬性的添加或刪除。

所以一般來(lái)說使用重新賦值的方式是較優(yōu)的方案，但如果只是想監(jiān)聽內(nèi)部嵌

套數(shù)據(jù)的話，重新賦值就比較重了，所以Vue也提供了直接監(jiān)聽嵌套屬性變化的途徑：

通過路徑監(jiān)聽內(nèi)部數(shù)據(jù)

watch: {
  'counter.up': function(newV, oldV) {
    console.log('counter.up change to %d from %d', newV, oldV);
  },
  'counter.down': function(newV, oldV) {
    console.log('counter.down change to %d from %d', newV, oldV);
  },
}

通過這種方式可以避免使用deep造成的性能消耗問題，當(dāng)只對(duì)某內(nèi)部屬性變化作出響應(yīng)的場(chǎng)景下比較合適，但仍要注意監(jiān)聽的路徑數(shù)據(jù)仍是復(fù)雜數(shù)據(jù)時(shí)的場(chǎng)景。

初始化變量觸發(fā)監(jiān)聽回調(diào)

使用watch監(jiān)聽變化時(shí)，給變量初始值不會(huì)觸發(fā)監(jiān)聽函數(shù)，如果像要改變這個(gè)默認(rèn)設(shè)定可以使用immediate參數(shù)，其用法和deep類似：

watch: {
  counter: {
    handler: function(newV, oldV) {
      console.log('counter change to %o from %o', newV, oldV);
    },
    immediate: true,
  }
}

這樣在賦初值時(shí)就會(huì)觸發(fā)監(jiān)聽函數(shù)，其中第一個(gè)參數(shù)為初始值，第二個(gè)參數(shù)為undefined。

關(guān)于“vue怎么使用watch監(jiān)聽屬性”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue怎么使用watch監(jiān)聽屬性”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。