Vue の computed と watch の違いを理解する方法

概要

Vue プロジェクトでは、computed と watch を多かれ少なかれ使用します。どちらもデータを監視できるようですが、それでも違いがあります。それでは、小さな例を使って両者の違いを理解してみましょう。

計算された

計算プロパティは、data で宣言されたデータまたは親コンポーネントから渡された props のデータに基づいて計算される新しい値です。この新しい値は、既知の値の変更に応じてのみ変更されます。つまり、このプロパティは他のプロパティに依存し、他のプロパティから計算されます。

<p>名前: {{ fullName }}</p>
……
データ： {
    ファーストネーム: 'David',
    姓: 'ベッカム'
},
計算: {
    fullName: function() { //メソッドの戻り値がプロパティ値として使用されます return this.firstName + ' ' + this.lastName
    }
}

計算プロパティオブジェクトでプロパティを計算するためのメソッドを定義し、データオブジェクトでデータプロパティにアクセスするのと同じように、プロパティアクセスの形式で呼び出します。つまり、{{メソッド名}} を使用して計算結果をページに表示します。

注: 計算プロパティ fullName はデータ内で定義できませんが、計算プロパティ value に関連する既知の値はデータ内にあります。

データ内に fullName が定義されている場合、以下のようにエラーが報告されます。

計算されたプロパティ値が関数の場合、デフォルトで get メソッドが使用され、戻り値が存在する必要があります。関数の戻り値は、プロパティのプロパティ値です。計算プロパティは fullName を定義し、対応する結果をこの変数に返します。変数を繰り返し定義および割り当てることはできません。

公式ドキュメントでは、computed の重要な機能、つまり、computed にはキャッシュ機能があることも強調されています。たとえば、ページ上に fullName を複数回表示します。

<p>名前: {{ fullName }}</p>
<p>名前: {{ fullName }}</p>
<p>名前: {{ fullName }}</p>
<p>名前: {{ fullName }}</p>
<p>名前: {{ fullName }}</p>
…… 

計算: {
    フルネーム: 関数 () {
         console.log('computed') // コンソールに一度だけ出力します。 return this.firstName + ' ' + this.lastName
    }
}

computed で定義された関数は一度だけ実行され、初期表示または関連データ、props、およびその他の属性データが変更されたときにのみ呼び出されることがわかります。

計算されたプロパティ値は、デフォルトで計算結果をキャッシュします。計算されたプロパティは、応答の依存関係に基づいてキャッシュされます。

計算コードは、計算プロパティが使用される場合にのみ実行され、繰り返しの呼び出しでは、依存データが変更されない限り、キャッシュ内の計算結果が直接取得されます。計算結果は、依存データが変更された場合にのみ再計算されます。

高度な計算プロパティ:

computed のプロパティには、get メソッドと set メソッドがあります。データが変更されると、set メソッドが呼び出されます。次に、計算された属性の getter/setter メソッドを使用して、属性データを表示および監視します。つまり、双方向バインディングです。

計算: {
    フルネーム：
        get() { //現在のプロパティ値を読み取り、関連データに基づいて現在のプロパティ値を計算して返すコールバック return this.firstName + ' ' + this.lastName
        },
        set(val) { // 属性値が変更されたときにコールバックし、関連する属性データを更新します。val は fullName の最新の属性値です。const names = val ? val.split(' ') : [];
            this.firstName = 名前[0]
            this.lastName = 名前[1]
        }
    }
}

監視プロパティを監視する

$watch() または vm オブジェクトの watch 構成を使用して、Vue インスタンスの属性の変更、または特定のデータの変更を監視し、特定のビジネスロジック操作を実行します。プロパティが変更されると、コールバック関数が自動的に呼び出され、関数内で計算が実行されます。監視できるデータソースは、データ、props、計算されたデータです。

上記の例は watch を通じて実装されています。

時計：
    // データ内の firstName を監視します。変更された場合は、変更された値をデータ内の fullName に設定します。val は firstName の最新の値です firstName: function(val) { 
        this.fullName = val + ' ' + this.lastName
    },
    lastName: 関数(val) {
        this.fullName = this.firstName + ' ' + val
    }    
}
// 上記から、watch は 2 つのデータを監視する必要があり、コードは同じ型で繰り返されるため、computed を使用するよりも簡潔であることがわかります。

注: リスニング関数には 2 つのパラメータがあります。最初のパラメータは最新の値で、2 番目のパラメータは入力前の値です。順序は新しい値、古い値である必要があります。パラメータが 1 つだけ記述されている場合は、最新の属性値です。

watch と computed のどちらかを選択する場合、もう 1 つの参考ポイントは、公式 Web サイトに書かれていることです。watch メソッドは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。したがって、ウォッチは非同期操作をサポートする必要があります。

上記は単純なデータ型の監視に限定されています。複雑なデータ型を監視するには、詳細な監視が必要です。

deep: オブジェクトの内部値の変化を検出するには、オプションパラメータに deep: true を指定します。配列の変更をリッスンする場合はこれは必要ありません。

データ： {
    フルネーム：
        ファーストネーム: 'David',
        姓: 'ベッカム'
    }
},
時計：
    フルネーム：
        ハンドラ(newVal, oldVal) {
            コンソールにログ出力します。
            コンソールにログ出力します。
        },
        深い: 本当
    }
}

上記の印刷結果:

出力された newVal 値と oldVal 値は同じなので、ディープモニタリングではオブジェクトの変更を監視できますが、オブジェクトの特定の属性の変更を監視することはできません。これは、それらの参照が同じオブジェクト/配列を指しているためです。 Vue は変更前の値のコピーを保持しません。 [ vm.$watch ディープモニタリング ]

オブジェクトの単一のプロパティの変更を監視する場合、次の 2 つの方法があります。

1. オブジェクトのプロパティを直接監視する

時計：{
    fullName.firstName: 関数(newVal,oldVal){
        コンソールにログ出力します。
    }
}

2. 計算プロパティで使用します。計算プロパティは監視するプロパティ値を返し、監視には watch を使用します。

計算: {
    ファーストネーム変更() {
    this.fullName.firstName を返す
    }
},
時計：
    ファーストネーム変更() {
        コンソールログ(this.fullName)
    }
}

要約する

watch と computed はどちらも Vue の依存関係追跡メカニズムに基づいています。依存データ (依存データ: 簡単に言うとデータなどのオブジェクトの配下に置かれたインスタンスデータ) が変更されると、そのデータに依存する関連データもすべて自動的に変更されます。つまり、関連する関数が自動的に呼び出され、データの変更が実現されます。

依存関係の値が変化すると、watch では複雑な操作が実行されることがありますが、computed での依存関係は、1 つの値が別の値に依存するだけであり、値への依存関係です。

適用シナリオ:

計算: 複雑な論理演算を処理するために使用されます。1 つのデータは 1 つ以上のデータの影響を受けます。ウォッチやメソッドが処理できない、または処理するのが不便な状況を処理するために使用されます。たとえば、テンプレート内の複雑な式の処理、ショッピングカート内のアイテム数と合計金額の関係の変化などです。

watch: 属性が変更され、特定のビジネスロジック操作を実行する必要がある場合、またはデータが変更されたときに非同期または高コストの操作を実行する必要がある場合 (データの変更は複数のデータに影響します) を処理するために使用されます。例えば、ルートの監視や入力ボックスの値の特殊な処理などに使用されます。

違い：

計算された

表示または関連データ、プロパティ、その他の属性データの変更を初期化するときに呼び出されます。
計算されたプロパティはデータ内にはありません。データまたはプロパティ内のデータに基づいて計算によって取得された新しい値です。この新しい値は、既知の値の変更に応じて変化します。
計算属性オブジェクト内の属性を計算する方法を定義し、データオブジェクト内のデータ属性を取得するのと同じように、属性アクセスの形式で呼び出します。
計算されたプロパティ値が関数の場合、デフォルトで get メソッドが使用され、戻り値が存在する必要があります。関数の戻り値は、プロパティのプロパティ値です。
デフォルトでは、計算されたプロパティ値は計算結果をキャッシュします。繰り返しの呼び出しでは、依存データが変更されない限り、キャッシュ内の計算結果が直接取得されます。依存データが変更された場合のみ、計算が再計算されます。
computed では、プロパティには get メソッドと set メソッドがあります。データが変更されると、set メソッドが呼び出されます。

時計

これは主に、特定のビジネスロジック操作を実行するために、特定のデータの変更を監視するために使用されます。これは、計算とメソッドの組み合わせと見なすことができます。
監視できるデータソース: データ、props、計算されたデータ。
ウォッチは非同期操作をサポートします。
キャッシュはサポートされていません。監視対象データの変更は、対応する操作を直接トリガーします。
リスニング関数には 2 つのパラメータがあり、最初のパラメータは最新の値、2 番目のパラメータは入力前の値です。順序は新しい値、古い値でなければなりません。

上記は、Vue における computed と watch の違いを理解するための詳細な内容です。Vue の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません: