Vue での計算とは何を意味しますか?-フロントエンドQ&A-php.cn

vue では、computed は「計算されたプロパティ」を意味します。これは依存関係に基づいてキャッシュされた計算であり、関連する依存関係が変更された場合にのみ更新されます。 computed の各計算プロパティはキャッシュされ、計算プロパティが依存するプロパティが変更される限り、計算プロパティは再実行され、ビューが更新されます。計算されたプロパティの結果はキャッシュされ、依存する応答プロパティが変更されない限り再計算されません。

Vue での計算とは何を意味しますか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

computed 定義

Computed は vue の computed プロパティです。依存関係に基づいてキャッシュされた計算です。関連する依存関係が変更された場合にのみ更新されます

computed 使用法

一般に、computed はデフォルトで getter 属性を使用します。

Vue での計算とは何を意味しますか?

computed の応答依存関係 (キャッシュ)

1. computed 計算される各プロパティは次のようになります。計算されたプロパティが依存するプロパティが変更される限り、計算されたプロパティは再実行され、ビューが更新されます。以下のコードでは、計算された属性

fullName は 2 つのプロパティ firstName と lastName に依存します。どちらか 1 つが変更される限り、fullName 再実行されます。 2.computed 計算されたプロパティはキャッシュされます。次のコードでは
fullName が 2 回使用されていますが、「this is fullName」はコンソールに 1 回だけ出力されます。

<template>
  <div>
    <div>
      姓：<input>
    </div>
    <div>
      名：<input>
    </div>
    <!-- 调用两次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("这是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

ログイン後にコピー

コンピューテッドの動作原理

コンピューテッドの動作原理を理解するには、次の 3 つの質問を理解するだけで済みます

1.応答性も高くなります

2. computed はキャッシュをどのように制御しますか?

3. 依存データが変更されると、computed はどのように更新されますか?

言語原則:

計算された応答性

応答性とは何なのか、サブスクライバーウォッチャーとは何なのかがわかりません? まず、Vue の応答性の原理を理解することができます。

簡単に言えば:

計算対象として設定した get 関数と set 関数は、Object.defineProperty に関連付けられます。
つまり、Vue は、 computed の読み取りと computed の割り当ての操作を監視してキャプチャできます。
computed を読み込むと set get 関数が実行されますが、キャッシュ操作の層もあるため、それほど単純ではありません。データが汚染されておらず、ダーティデータではない場合、get 関数を実行せずに値がキャッシュから直接フェッチされます。 (ダーティデータとは何かについては後述します)
computed を代入する際には set 関数が実行されます。これは比較的単純で、設定値を Object.defineProperty - set に直接割り当てます。

Computed のキャッシュを制御する方法

Computed にキャッシュがあることは誰もが知っており、公式がそれについて説明しています。

計算されたプロパティの結果はキャッシュされ、依存する応答プロパティが変更されない限り再計算されません。依存関係 (非リアクティブプロパティなど) がインスタンスのスコープ外にある場合、計算されたプロパティは更新されないことに注意してください。

なぜキャッシュが必要なのでしょうか?巨大な配列を走査し、多くの計算を行う必要がある、計算コストの高いプロパティ A があるとします。その場合、 A に依存する他の計算プロパティがある可能性があります。キャッシュを使用しない場合、必然的に A の get 関数を複数回実行することになります。大量の計算により JS スレッドが占有され、ページのレンダリングがブロックされます。

それでは、Vue では、computed はキャッシュを使用するかどうかをどのように決定するのでしょうか?

まず、計算後の値を変数(watcher.value)に保存します。計算結果を読み取ってキャッシュを使用する場合、この変数は直接返されます。計算が更新されると、この変数は再割り当てされて更新されます。

ヒント: 計算計算では、設定した get 関数を呼び出して戻り値を取得します。

computed キャッシュを制御する上で重要な点は [ダーティデータフラグダーティ] ダーティはウォッチャーの属性です。

dirty が true の場合、computed を読み取ると get 関数が実行され、再計算されます。
dirty が false の場合、computed の読み取りにはキャッシュが使用されます。

キャッシュメカニズムの簡単な説明

各 computed が最初に独自のウォッチャーを作成すると、watcher.dirty はset = true に設定すると、computed が使用されるときに値が計算されます。
依存するデータが変化してcomputedが通知されるとwatcher.dirty = trueが代入されますが、この際computedを再読み込みする際にget関数が実行されて再計算されます。
Computed 計算が完了すると、watcher.dirty = false が設定され、他の場所で再度読み取るときにキャッシュが使用されて計算が回避されます。

#依存データが変更されたときに計算結果を更新する方法

#Vue の応答性原則の簡単な紹介

computed の本質はデータと似ています。使用すると、サブスクライバーウォッチャーが作成され、依存関係のコレクションに渡されます。たとえば、A が B を参照すると、B は A のウォッチャーを収集します。

シーン設定

これで、ページ A は計算された B を参照し、計算された B はデータ C に依存します。

このように、A->B->C の依存関係の順序になります。

それでは、データ C が変更されると何が起こるでしょうか?

#これは本当ですか?

計算対象 B に更新を通知すると、計算対象 B の再計算が開始されます。

次に、computed B はページ A に更新を通知し、computed を再読み込みします。
#連鎖作戦? C -> B -> A これが実行順序ですか?

実際、実際のプロセスは、データ C が変更され始めた後...

計算された B のウォッチャーに更新を通知し、ダーティデータのみをリセットします。 flag ビットダーティ =true、値は計算されません。

ページ A ウォッチャーに通知して更新およびレンダリングし、計算された B を再読み込みして、計算された B の再計算を開始します。

#データ C がページ A に通知できるのはなぜですか?

Vue での計算とは何を意味しますか?

データ C の依存関係コレクターがデータ C を収集します。同時に Watcher が B とページ A を計算します。

データ C がページ A のウォッチャーを収集できるのはなぜですか?

ページ A が計算結果 B を読み取っているとき、ページ A のウォッチャーにデータを詰め込む機会が必要になります。 C 、つまりページ A ウォッチャーとデータ C は間接的に関連しているため、データ C はページ A ウォッチャーを収集します。

具体的なコードの実装方法については、以下のソースコード解析で説明します。

それでは、計算結果を更新するにはどうすればよいでしょうか?

依存関係通知によって更新された後、ダーティデータフラグをリセットし、ページが計算された値を読み取るときに値を更新します。

各言語の要約

計算された制御は、watcher.dirty を通じてキャッシュを読み取るかどうかを制御します。

computed は、[データの依存関係] が [computed に依存するウォッチャー] を収集するようにします。これにより、データが変更されたときに、computed と computed に依存する場所が同時に通知されます。
[関連ビデオチュートリアルの推奨事項:
vuejs エントリチュートリアル
、

]

以上がVue での計算とは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。