Vue の計算とメソッドの違いは何ですか?-Vue.js-php.cn

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

PHPz

リリース： 2020-09-25 17:37:22

転載

3077 人が閲覧しました

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

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

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

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

computed はプロパティ呼び出しですが、メソッドは関数呼び出しです
computed にはキャッシュ機能がありますが、メソッドではありません

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

<!--HTML部分-->
<div id="app">
    <h1>{{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 のキャッシュ関数

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

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

誰もが知っている 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 メソッドによる再計算の結果ではなく、戻り値を直接取得します。