Vue 中使用 computed 和 watch 實現資料計算與監聽的技巧

Vue.js 是一個流行的 JavaScript 前端框架，提供了豐富的資料綁定和回應特性，讓我們可以輕鬆管理 Web 應用程式的狀態。其中 computed 和 watch 是 Vue.js 中兩個重要的資料處理和監聽工具，本篇文章將介紹如何使用它們實現資料計算與監聽的技巧。

1. computed

computed 計算屬性是依賴其他屬性值的屬性，也就是說，當其他的屬性值改變時，computed 屬性會自動重新計算。 computed 計算屬性有兩個主要的作用：

• 用於計算新的數據，例如顯示列表項目的總數或對列表數據進行排序。
• 對現有資料進行處理，例如格式化日期或金額等。

1.1 計算新資料

我們可以在 Vue 實例的 computed 物件中定義多個計算屬性。計算屬性傳回的結果可以直接在模板中使用，而且只有當依賴的屬性改變時，它才會重新計算。以下是一個例子：

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

在上面的範例中，我們透過計算屬性的方式來對商品清單進行排序。 sortedProducts 計算屬性會對 products 的價格升序排列，然後再將排好序的結果傳回給模板中的 v-for 指令進行渲染。

要注意的是，計算屬性只有在它所依賴的屬性改變時才會被重新計算。所以，即使我們在 sortedProducts 計算屬性中使用了 this.products，但是只要 products 沒有改變，sortedProducts 就不會被重新計算。

1.2 對現有數據進行處理

計算屬性不僅可以用來計算新的數據，還可以用來對現有數據進行處理，例如格式化日期或金額等。以下是一個例子：

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

在上面的例子中，我們透過計算屬性的方式將訂單時間格式化為本地日期和時間字串（toLocaleString），並將格式化後的結果顯示在模板中。由於計算屬性的特性，formattedTime 只有在 orderTime 改變時才會重新計算。

2. watch

watch 是一個深度監聽統一資料來源的函數。與 computed 不同，watch 監聽到的資料來源發生變化時，並不會自動地重新渲染模板，而是需要手動執行操作。 watch 主要用於監聽資料的變化，從而觸發對應的操作。下面是一個例子：

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

在上面的範例中，我們透過 watch 監聽輸入框中的 text 變數。當 text 長度超過 10 個字元時，watch 會觸發對應的操作，彈出警告框，防止使用者繼續輸入。同時，我們透過 computed 計算屬性統計剩餘字元數，可以看到計算屬性 charsLeft 只有在 text 改變時才會重新計算。

要注意的是，watch 監聽的變數是一個函數，並且會接收新值和舊值兩個參數。我們可以根據這兩個參數執行對應的操作。 watch 也提供了深度監聽和立即執行等進階選項，可以根據具體需求進行配置。

3. 結語

computed 和 watch 是 Vue.js 中必不可少的工具，非常適用於對資料進行複雜的處理和監聽。我們可以在 computed 中定義多個計算屬性，透過依賴關係來控制計算順序和更新方式。而在 watch 中，我們可以對資料來源進行深度監聽，並且即時回應資料來源的變化。雖然 computed 和 watch 有一定的學習和使用成本，但這些成本的提高將會幫助您建立更靈活和高效的 Vue 應用程式。

以上是Vue 中使用 computed 和 watch 實現資料計算與監聽的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！