vueの計算プロパティを詳しく理解する

一、計算属性を使用する理由
テンプレート内の式は非常に便利ですが、単純な演算に使用されるように設計されています.テンプレートに論理を入れすぎると、テンプレートが重すぎてメンテナンスが困難になります.例:

  {{ message.split('').reverse().join('') }}

この場所では、テンプレートは単純な宣言論理ではありません.変数messageを表示したい反転文字列であることに気づくには、しばらく見なければなりません.テンプレートでここの反転文字列を複数回参照したい場合は、より扱いにくいです.
したがって、複雑な論理では、計算プロパティを使用する必要があります.
二、属性を計算するキャッシュvs方法

同じ関数を計算属性ではなくメソッドとして定義できます.両方式の最終結果は確かに全く同じである.しかしながら、異なるのは、計算属性がそれらの依存に基づいてキャッシュされることである.依存関係が変更された場合にのみ、それらは再評価されます.

これは、ある属性の値が変更されていない限り、関数を再実行することなく、複数回アクセスした計算属性が直前の計算結果をすぐに返すことを意味する.

それに対して、呼び出し方法は、再レンダリングがトリガーされるたびに関数を再実行する.

なぜキャッシュが必要なのか?パフォーマンスオーバーヘッドの大きい計算プロパティAがあると仮定します.大きな配列を巡り、大量の計算を行う必要があります.そして、他の計算属性がAに依存する可能性があります.キャッシュがなければ、Aのgetterを複数回実行することは避けられません.

キャッシュを望まない場合は、代わりに方法を使用します.
三、計算属性vsリスニング属性
Vueは、Vueインスタンス上のデータ変動:リスニング属性を観察し、応答するためのより一般的な方法を提供する.他のデータに従って変更する必要があるデータがある場合は、悪用しやすいwatch特に使用したことがある場合はAngularJS.しかし、通常より良い方法は、命令式のwatchコールバックではなく計算属性を使用することである.
参考資料
Vue.js公式ドキュメント