computed と watch を使用して Vue でデータの計算と監視を実装するためのヒント

Vue.js は、豊富なデータ バインディングと応答機能を提供する人気の JavaScript フロントエンド フレームワークで、Web アプリケーションの状態を簡単に管理できるようにします。このうち、computed と watch は Vue.js の 2 つの重要なデータ処理および監視ツールであり、この記事ではこれらを使用してデータ計算および監視手法を実装する方法を紹介します。

1. computed

Computed プロパティは、他のプロパティの値に依存するプロパティです。つまり、他のプロパティの値が変更されると、computed プロパティは自動的に再計算されます。 computed 計算プロパティには 2 つの主な関数があります。

• これは、リスト項目の総数の表示やリスト データの並べ替えなど、新しいデータを計算するために使用されます。
• 日付や金額の書式設定など、既存のデータを処理します。

1.1 新しいデータの計算

Vue インスタンスの計算オブジェクトで複数の計算プロパティを定義できます。計算されたプロパティによって返された結果はテンプレートで直接使用でき、依存するプロパティが変更された場合にのみ再計算されます。以下に例を示します。

<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 計算プロパティは、製品の価格を昇順に並べ替え、並べ替えられた結果をレンダリングのためにテンプレートの v-for ディレクティブに返します。

計算されたプロパティは、依存するプロパティが変更された場合にのみ再計算されることに注意してください。したがって、sortedProducts 計算プロパティで this.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 は、統合されたデータソースを詳細に監視する機能です。計算済みとは異なり、監視によって監視されるデータ ソースが変更された場合、テンプレートは自動的に再レン​​ダリングされませんが、操作は手動で実行する必要があります。 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 を使用して入力ボックス内のテキスト変数を監視します。テキストの長さが 10 文字を超えると、watch は対応する操作をトリガーし、ユーザーが入力を続行できないように警告ボックスをポップアップ表示します。同時に、計算​​された計算属性を通じて残りの文字数をカウントします。計算属性 charsLeft は、テキストが変更された場合にのみ再計算されることがわかります。

watch によって監視される変数は関数であり、新しい値と古い値の 2 つのパラメーターを受け取ることに注意してください。これら 2 つのパラメータに基づいて、対応する操作を実行できます。 watch は、詳細な監視や即時実行などの高度なオプションも提供しており、特定のニーズに応じて構成できます。

3. 結論

computed と watch は Vue.js の必須ツールであり、データの複雑な処理と監視に非常に適しています。 computed で複数の計算プロパティを定義し、依存関係を通じて計算順序と更新メソッドを制御できます。 watch では、データ ソースを詳細に監視し、データ ソースの変更にリアルタイムで対応できます。 Computed と Watch には一定の学習コストと使用コストがかかりますが、これらのコストの増加は、より柔軟で効率的な Vue アプリケーションを構築するのに役立ちます。

以上がcomputed と watch を使用して Vue でデータの計算と監視を実装するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。