vue怎么使用watch監聽屬性

這篇文章主要介紹了vue怎么使用watch監聽屬性的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue怎么使用watch監聽屬性文章都會有所收獲，下面我們一起來看看吧。

基本用法

Vue watch最重要的使用場景是根據某屬性的變化執行某些業務邏輯:

<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的基本用法很簡單：針對需要監聽的屬性定義個同名的函數即可，函數的第一個參數為變化后的值，第二個參數為變化前的值。

監聽object

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

比如對于一個object變量來說，添加屬性、刪除屬性、修改屬性的值都不會改變這個地址，這也可以說這個object變量沒有變化。

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

這里的變化指的是地址的變化，能夠觸發變化最簡單的方式就是重新賦值。

<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) {
      // 不會被觸發
      console.log('counter change to %o from %o', newV, oldV);
    },
  }
};
</script>

針對counter的監聽不會被觸發，因為this.counter[type] += 1;并不會使this.counter變化（地址沒變）。那如果想要監聽到這個變化應該怎么辦呢？一般來說有兩種方式：

使用deep參數

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

使用deep需要使用watch的完整形式：handler是監聽回調函數，deep: true指定了不僅僅監聽counter的變化，也監聽其內部屬性的變化，所以當counter.up或counter.down變化時才能出發handler回調。

重新賦值

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

那兩種方式優劣如何呢？使用deep參數會為數據每一層都添加監聽，當層級較深時比較耗費性能，而且Vue不能監聽到屬性的添加或刪除。

所以一般來說使用重新賦值的方式是較優的方案，但如果只是想監聽內部嵌

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

通過路徑監聽內部數據

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造成的性能消耗問題，當只對某內部屬性變化作出響應的場景下比較合適，但仍要注意監聽的路徑數據仍是復雜數據時的場景。

初始化變量觸發監聽回調

使用watch監聽變化時，給變量初始值不會觸發監聽函數，如果像要改變這個默認設定可以使用immediate參數，其用法和deep類似：

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

這樣在賦初值時就會觸發監聽函數，其中第一個參數為初始值，第二個參數為undefined。

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