Vue.jsの計算されたプロパティの概要
計算されたプロパティを使用して、ビューに表示されているプロパティをすばやく計算できます。 これらの計算はキャッシュされ、必要な場合にのみ更新されます。
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;
}
}
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
メソッドでは、渡された文字列は名前と名前に分割されます。
ウォッチャーに関する一言
ほとんどの場合、計算されたプロパティで十分ですが、ウォッチャーは、プロパティへの変更をリッスンできるようにすることで、追加レベルの制御を提供します。
ウォッチャーは、その名前が示すように、モデルオブジェクトの変更を監視することを可能にします。 ウォッチャーを使用して計算値と同じ結果を得ることができますが、多くの場合、より複雑で高価です。
ウォッチャーは、次のようなより複雑な要件に使用できます。
- 非同期操作
- 中間値の設定
- 操作が呼び出される回数を制限する(例:入力イベントをデバウンスする)