Vue は、結果が変更された場合にのみ計算されたプロパティを更新します

Question

私が遭遇した問題を次のように単純化して考えてみましょう。

デフォルトのエクスポート {
    データ （） {
        戻る {
            i_change_alot: 0、
        };
    }、
    マウントされた() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }、10);
    }、
    計算結果: {
        someComputedValue() {
            this.i_change_alot;
            
            「a」を返します;
        }
    }
}

10 ミリ秒ごとにランダムな値に変化する属性 i_change_alot を作成しました。これは、プロパティが非常に反応的になるため、計算されたプロパティがトリガーされることを意味します。

単純に this.i_change_alot を呼び出すことで依存関係をトリガーします (たとえば、) が、計算されたプロパティの result は決して変更されません。

最終結果は、計算されたプロパティ someCompulatedValue が 10 ミリ秒ごとに更新され、私の知る限り、ビューの再レンダリングがトリガーされます。

someCompulatedValuevalue/resultが変更された場合のみ再レンダリングするようにするにはどうすればよいですか?

(元の質問は、「1 秒前」、「2 秒前」などの反応的な相対日付の表示に関するものでした。ただし、しばらくすると、これは 30 分前 になります。 < code>31 minutes ago これは、1 分間文字列表現が変更されていないものの、date 属性への依存関係により 10 ミリ秒ごとに再レンダリングされることを意味します。

https://github.com/vuejs/vue/issues/11399 によると、オブザーバーを使用して構造体を作成できますが、直感に反しているように見えます。

Answer 1

値が変化しないときに Vue が計算をトリガーするのはなぜですか?

Vue は、再計算する前に最終結果が変更されたかどうかを知ることができないからです。したがって、計算された変数は依存関係が変更されるたびに再計算されますが、これは避けられません。

よくある誤解は、Vue は変数の値を計算することによって計算された変数をキャッシュするというものですが、実際には、Vue は依存関係の状態によって計算された変数をキャッシュします。

再レンダリングを頻繁に行わないでください

オブザーバーを作成したり (ご存知のとおり)、計算された値を使用してテンプレートをコンポーネントにラップしたりすることができます。

なぜここで別のコンポーネントのヘルプにラップするのでしょうか?

Vue がテンプレートをレンダリング関数に変換するためです。関数は、依存関係が変更されるたびに再計算されます。おなじみですね？はい、計算変数のように機能します。 render 関数の依存関係は、テンプレートで使用するすべての変数です。したがって、頻繁に変更される変数をコンポーネントにラップすると、Vue はそのコンポーネントのみを再レンダリングし、大きなコンポーネントの再レンダリングを回避します。これはパフォーマンスに大きな影響を与えます