計算されたプロパティを使用して、ビューに表示されているプロパティをすばやく計算できます。 これらの計算はキャッシュされ、必要な場合にのみ更新されます。

Vueには、ビューの値を設定する方法が複数あります。 これには、データ値をビューに直接バインドするを使用するか、フィルターを使用してコンテンツに対して単純な変換を行うことが含まれます。 これに加えて、計算されたプロパティを使用して、データモデルの値または値のセットに基づいて表示値を計算できます。

計算されたプロパティ

計算されたプロパティを使用すると、ビューに対してモデル固有の複雑な値を計算できます。 これらの値は依存関係の値にバインドされ、必要な場合にのみ更新されます。

たとえば、データモデルに一連のサブジェクト結果を含めることができます。

data() {
  return {
    results: [
          {
          name: 'English',
          marks: 70
        },
        {
          name: 'Math',
          marks: 80
        },
        {
          name: 'History',
          marks: 90
        }
      ]
  }
}

すべてのサブジェクトの合計を表示するとします。 このタスクにはフィルターまたはを使用できません。

  • Filters は、単純なデータフォーマットに使用され、アプリケーションの複数の場所で必要になります。
  • Expressions では、フロー操作やその他の複雑なロジックを使用できません。 それらは単純に保つ必要があります。

ここで、計算されたプロパティが役立ちます。 次のように、計算された値をモデルに追加できます。

computed: {
  totalMarks: function() {
    let total = 0;
    for(let i = 0; i < this.results.length; i++){
      total += parseInt(this.results[i].marks);
    }
    return total;
  }
}

totalMarks計算プロパティは、results配列を使用して合計マークを計算します。 値をループして、小計を返します。

次に、計算された値をビューに表示できます。

<div id="app">
  <div v-for="subject in results">
    <input v-model="subject.marks">
    <span>
      Marks for {{ subject.title }}: {{ subject.marks }}
    </span>
  </div>

  <span>
    Total marks are: {{ totalMarks }}
  </span>
</div>

計算されたプロパティとメソッド?

合計を出力するメソッドを使用しても、同じ結果を得ることができます。

計算されたセクションにtotalMarks関数を含める代わりに、メソッドに移動し、ビューでテンプレートを変更してメソッドを実行できます。

<span>
  Total marks are: {{ totalMarks() }}
</span>

これは同じ出力を提供しますが、パフォーマンスに影響を与えています。 この構文を使用すると、totalMarks()メソッドは、ページがレンダリングされるたびに(つまり、変更されるたびに)実行されます。

代わりに計算されたプロパティがある場合、Vueは計算されたプロパティが依存している値を記憶します(例:前の例では、resultsになります)。 そうすることで、Vueは依存関係が変更された場合にのみ値を計算できます。 それ以外の場合は、以前にキャッシュされた値が返されます。

このため、関数は純粋関数である必要があります。 副作用はありません。 出力は、関数に渡された値にのみ依存する必要があります。

計算されたセッター

デフォルトでは、計算されたプロパティはゲッターのみを表示します。 しかし、セッターを持つことも可能です。

computed: {
  fullName: {
    get: function() {
      return this.firstName + this.lastName;
    },
    set: function(value) {
      let names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

ゲッターとセッターの両方を使用することで、入力値をモデルに正しくバインドできます。 メソッドにfullNameを設定すると、渡された文字列は名前と名前に分割されます。

ウォッチャーに関する一言

ほとんどの場合、計算されたプロパティで十分ですが、ウォッチャーは、プロパティへの変更をリッスンできるようにすることで、追加レベルの制御を提供します。

ウォッチャーは、その名前が示すように、モデルオブジェクトの変更を監視することを可能にします。 ウォッチャーを使用して計算値と同じ結果を取得することは可能ですが、多くの場合、より複雑で高価です。

ウォッチャーは、次のようなより複雑な要件に使用できます。

  • 非同期操作
  • 中間値の設定
  • 操作が呼び出される回数を制限する(例:入力イベントをデバウンスする)

JSFiddleで見る