Vue の計算とメソッドの違いは何ですか?

この記事では、Vue の計算とメソッドの違いを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. 計算とメソッドの 2 つの主要な違い

公式ドキュメントでは、最も重要な違いが強調されています。 computed とメソッドの間は 2 つのポイントです

• computed はプロパティ呼び出しですが、メソッドは関数呼び出しです

• computed にはキャッシュ機能がありますが、メソッドではありません

OK、具体的な例を見てみましょう

<!--HTML部分-->
<div id="app">
    <h1 id="message">{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;我是消息，&#39;
    },
    methods: {
        methodTest() {
            return this.message + &#39;现在我用的是methods&#39;
        }
    },
    computed: {
        computedTest() {
            return this.message + &#39;现在我用的是computed&#39;
        }
    }
})

#2. 計算された属性の呼び出し

注意深い友人は、 HTML 補間

• では、computed によって定義されたメソッドを属性アクセスの形式で呼び出します、{{computedTest}}

• しかしメソッド {{methodTest()}} などの定義されたメソッドを呼び出すには () を追加する必要があります。そうしないと、次の図に示すように、ビューには test1 が表示されます。

#3. computed のキャッシュ関数

まず第一に、キャッシュが何に使用されるのかを理解する必要があります。

誰もが知っている HTTP キャッシュと比較すると、その中心的な機能は、サーバー上で更新されていないリソースを再利用し、不必要なリクエストを回避し、ユーザー エクスペリエンスを最適化することです。

同じことです。計算済みの場合は true 同じ:

上記の例では、メソッドによって定義されたメソッドが関数呼び出しの形式でアクセスされ、test2-1、test2-2、test2-3 が MethodTest メソッドを 3 回繰り返し実行します。繰り返しになりますが、methodTest の戻り値が 1,000 個必要になるシナリオが発生した場合、必然的に大量の無駄が発生することは間違いありません。

さらに恐ろしいのは、message の値を変更すると、その後、これら 1,000 の各メソッドTest メソッドが再計算されます。 。 。 。

したがって、公式ドキュメントでは、複雑なロジックでは、計算されたプロパティを使用する必要があることを繰り返し強調しています。

計算されたプロパティはデータ内のデータに依存し、関連する依存データが変更された場合にのみ

上記の例のように、Vue がインスタンス化されると、computed は計算を実行して値を返す computedTest メソッドを定義します。後続のコード記述では、computedTest メソッドがメッセージ データに依存する限り、つまり、test3-1 と test3-2 は、computedTest メソッドによる再計算の結果ではなく、戻り値を直接取得します。

これの利点も明らかです。同様に、1000 個の computedTest 戻り値が必要なシナリオに遭遇した場合、これによりメソッドに比べてメモリが大幅に節約されることは間違いありません

たとえmessage の値を変更すると、computedTest は 1 回だけ計算されます

4.computed のその他の手順

computed 実際には、次のようにすることができます。

#computed の起源は重要な理由であり、テキスト補間のロジックが重くなりすぎて保守が困難になるのを防ぐためです。
• 関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

vue チュートリアル 推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、こちらをご覧ください:

プログラミング入門 ！ ！

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