開発者ドキュメント

Vue.jsの計算されたプロパティの概要

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

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

計算されたプロパティ

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

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

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

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

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

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

The 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で見る

モバイルバージョンを終了