Vueの計算プロパティの詳細な説明

1. 計算属性とは何ですか? 簡単に言えば、計算された結果が属性に保存されるもので、キャッシュとして考えることができます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
    <!-- これは currentTime1() であり、括弧はメソッド呼び出し用であることに注意してください。-->
    <p>現在の時刻1: {{現在の時刻1()}}}</p>
    <!--ここでは currentTime1 は括弧で囲まれておらず、属性を通じて呼び出されます-->
    <p>現在の時刻2: {{現在の時刻2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            メッセージ: 「hello vue!」
        },
        メソッド: {
            currentTime1: 関数() {
                // 現在のタイムスタンプを返します return Date.now();
            }
        },
        計算: {
            /*注: ここには計算プロパティがあり、メソッドと計算メソッドの名前は同じにすることはできません。
                   同じ名前のメソッドのみが呼び出されます*/
            currentTime2: 関数 () {
                このメッセージ;
                // 現在のタイムスタンプを返します return Date.now();
            }
        }
    });
</スクリプト>
</本文>
</html>

実行結果:

ここに画像の説明を挿入

一見すると違いがないように見えるかもしれません。

しかし、よく考えてみると、一方はメソッドであり、もう一方はプロパティです。

以下のように表示されます。

<div id="アプリ">
    <!-- これは currentTime1() であり、括弧はメソッド呼び出し用であることに注意してください。-->
    <p>現在の時刻1: {{現在の時刻1()}}}</p>
    <!--ここでは currentTime1 は括弧で囲まれておらず、属性を通じて呼び出されます-->
    <p>現在の時刻2: {{現在の時刻2}}</p>
</div>

重要なポイント: 属性は値を格納します。新しい値が入力されたときのみ変更されます。それ以外の場合は、キャッシュと同じになります。これを見てみましょう:

ここに画像の説明を挿入

説明すると:

1. 1 と 2 から、一方がメソッドで、もう一方がプロパティであることがわかります。メソッドを使用してプロパティを呼び出すことは絶対にできません。

2. 1 と 3 では、メソッド呼び出しの値が常に変化しているのに対し、属性呼び出しの値は変化していないことがわかります。これはキャッシュメカニズムと同じです。

3. 3、4、5 から、関数内の値を変更すると、キャッシュ内の値を変更するのと同じになり、値が更新されることがわかります。

要約する

メソッドが呼び出されると、その都度計算を行う必要があります。計算処理があるため、必然的にシステムのオーバーヘッドが発生します。結果が頻繁に変わらない場合はどうなるでしょうか。この時点で、結果をキャッシュすることを検討できます。これは、コンピュータのプロパティを使用して簡単に実行できます。コンピュータプロパティの主な機能は、システムのオーバーヘッドを節約するために、頻繁に変更されない計算結果をキャッシュすることです。 ----- 分かりましたか、友人たち？

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

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