Vue の計算属性と監視属性を通じてアプリケーションのパフォーマンスを共同で最適化する方法

Vue の計算プロパティと監視プロパティを使用してアプリケーションのパフォーマンスを共同で最適化する方法

はじめに:
Vue は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。その中心的な概念は、データとビューを結合することです。ウェイバインディング。実際の開発では、フォームの検証やデータのフィルタリングなど、リアルタイムの計算や監視が必要なデータを処理する必要があることがよくあります。アプリケーションのパフォーマンスを向上させるために、Vue はこれらの要件を連携して処理するための計算属性と監視属性を提供します。この記事では、計算属性と監視属性を使用してアプリケーションのパフォーマンスを最適化する方法と、対応するコード例を紹介します。

1. 計算属性の使用
計算属性を使用すると、応答性の依存関係に基づいていくつかのプロパティを宣言し、その中に計算ロジックをカプセル化できます。 Vue は、関連する依存関係の変更に基づいて計算されたプロパティの値を自動的に更新し、常に最新の状態に保ちます。

1.1 基本構文
Vue コンポーネントでの計算属性の宣言は非常に簡単で、コンポーネントの計算属性で関数を定義するだけです。例:

computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

上記のコードでは、firstName と lastName を組み合わせた後の完全な名前を返す計算属性 fullName を定義します。

1.2 計算キャッシュ
計算属性の重要な機能は計算キャッシュです。計算された属性が依存する応答データが変更されると、計算された属性が再計算され、計算結果がキャッシュされます。次回計算されたプロパティにアクセスするときに、関連する依存関係が変更されていない場合、Vue は再計算せずにキャッシュされた値を直接返します。

この計算キャッシュ メカニズムにより、特に配列フィルタリング操作など、計算プロパティで大規模なコンピューティング リソースが必要な場合のパフォーマンスが大幅に向上します。

1.3 例
以下は、計算された属性を使用するサンプル コードです:

<template>
  <div>
    <input v-model="firstName" type="text" placeholder="请输入姓">
    <input v-model="lastName" type="text" placeholder="请输入名">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

上記のコードでは、v-model ディレクティブを使用して 2 つの入力要素とデータを結合します。コンポーネントの属性。双方向バインディング。次に、テンプレートで {{ fullName }} を使用して計算結果を表示します。 firstName または lastName が変更されると、Vue は fullName の値を自動的に更新し、更新された結果をページにレンダリングします。

2. watch 属性の使用
watch 属性を使用すると、特定のデータ変更を監視し、データ変更時に対応する操作を実行できます。計算属性とは異なり、監視属性は計算を実行しませんが、データ変更後にカスタム ロジックを実行します。

2.1 基本構文
Vue コンポーネントでの watch 属性の宣言も非常に簡単で、コンポーネントの watch 属性に関数を定義するだけです。例:

watch: {
    firstName(newValue, oldValue) {
        console.log(`firstName从${oldValue}变为${newValue}`);
    }
}

上記のコードでは、firstName の変更を監視し、変更されたときに変更前後の値を出力するための watch 属性を定義します。

2.2 詳細な監視
デフォルトでは、Vue はオブジェクトまたは配列の直接プロパティの変更のみを監視します。オブジェクトまたは配列内のすべての属性の変更を詳細に監視する必要がある場合は、watch 属性で deep 属性を使用できます。例:

watch: {
    obj: {
        handler(newValue, oldValue) {
            console.log('obj发生变化');
        },
        deep: true
    }
}

上記のコードでは、obj という名前のオブジェクトの変更を詳細に監視しています。obj の属性が変更されると、対応する処理関数がトリガーされます。これは、オブジェクトの変化を聞くのに役立ちます。

2.3 非同期監視
データ変更後に、リクエストの送信やキャッシュの更新などの非同期操作を実行したい場合があります。 Vue では、この状況を処理するために、watch 属性で handler と呼ばれる非同期関数を定義できます。例:

watch: {
    firstName(newValue, oldValue) {
        this.debouncedGetData();
    }
},
methods: {
    debouncedGetData: debounce(function() {
        // 异步操作
    }, 500)
}

上記のコードでは、lodash ライブラリの debounce 関数を使用して this.debouncedGetData を呼び出す頻度を制限し、500 ミリ秒以内に非同期操作が 1 つだけ実行されるようにしています。

3. 計算属性と監視属性の共同使用
計算属性と監視属性は共同して使用でき、相互に排他的ではありません。実際の開発では、ニーズに応じてどちらかを柔軟に選択したり、両方を同時に使用したりすることができます。

計算属性を使用する場合は、他の応答性の高いデータ計算に依存する結果に適した計算キャッシュの特性を考慮する必要があります。 watch 属性を使用する場合、通常は応答データの変更を監視し、対応する操作を実行します。これは、データの変更に即時に応答する必要があるシナリオに適しています。

たとえば、computed 属性を使用して、ショッピング カートの合計価格を計算できます:

computed: {
    totalPrice() {
        return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
    }
}

そして、watch 属性を使用して、ショッピング内の製品の数量の変化を監視できます。カートを作成し、変更されたときに更新します 合計価格:

watch: {
    'cart': {
        handler(newValue, oldValue) {
            this.totalPrice = this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
        },
        deep: true
    }
}

上記のコードでは、ショッピング カート (カート) 内の変更を監視します。ショッピング カート内の商品の数量が変更されると、合計価格 (totalPrice) ) が再計算されて更新されます。

結論:
Vue 開発実践では、計算属性と監視属性を合理的に使用することで、アプリケーションのパフォーマンスと開発効率を向上させることができます。 computed 属性はコンピューティング リソースを節約し、複雑なビジネス ロジックを実装できますが、watch 属性はデータの変更を監視し、特別なニーズを満たすために対応する操作を実行できます。特定の状況に応じてこれら 2 つの機能を柔軟に使用すると、コードをより簡潔でエレガントにすることができます。

以上がVue の計算属性と監視属性を通じてアプリケーションのパフォーマンスを共同で最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。