首頁 > 軟體

vue專案中的資料變化被watch監聽並處理

2022-04-11 10:00:25

vue資料變化被watch監聽處理

監聽當前vue檔案資料

例如,當前的vue檔案的data中有如下屬性:

data() {
    return {
        dialogFormVisible: false,
    }
}

要監聽dialogFormVisible變數的資料變化,則程式碼如下:

watch: {
    dialogFormVisible: function(newVal, oldVal) {
      alert(newVal);
      alert(oldVal);
    }
}

監聽vuex中的資料

如果vuex中宣告的資料如下:

export default new Vuex.Store({
  state: {
    avatar: "", 
  },
  mutations: {},
  actions: {},
  modules: {}
});

則監聽的程式碼如下:

watch: {
    "$store.state.avatar": function(newValue, oldValue) {
      ...
    }
  },

如何正確使用watch監聽屬性變化

Vue中可以使用監聽器監聽屬性的變化,並根據屬性變化作出響應。但一旦涉及到複雜資料的監聽(如Object,但陣列一般不需要,因為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。

總結:使用watch可以監聽屬性的變化,且其使用方式也不少,理解每種方式的使用場景能為開發節省時間,優化效能。 

以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com