この記事はVue.jsの算出プロパティについて、「メソッドとの違い」や「算出プロパティの使い所」がよくわからない、と混乱したことがある人向けにまとめた内容です。
算出プロパティとは
Vue.jsではテンプレート内に計算や式を記述することができますが、使いすぎるとテンプレートにロジックが増えて、メンテナンスしづらくなってしまいます。
算出プロパティは処理に名前をつけて、テンプレートに記述することでテンプレートを簡潔にし、この問題を解決してくれます。
定義した算出プロパティは、テンプレート上では、あたかも変数であるかのように扱えます。
例えば、高さと幅を”data”に保持しているコンポーネントがあり、それぞれが入力可能であったとします。
高さと幅を使って面積を計算する算出プロパティを用意する場合は、次のようになります。
<template>
<div>
<div>
<label>
幅：
<input v-model="width" type="text">
</label>
<label>
高さ：
<input v-model="height" type="text">
</label>
<label>
面積：
<span>{{ area }}</span>
</label>
</div>
</div>
</template>
<script>
export default {
name: "ComputedSample",
data() {
return {
width: 10,
height: 20
}
},
computed: {
area: function () {
return this.width * this.height;
}
}
}
</script>
ここでは”area”を算出プロパティとして定義しました。
算出プロパティを定義する際は、上記のように”computed”を使用します。
“template”内で定義した算出プロパティを参照して、計算結果を表示しています。
“width”または”height”の値が変更されると算出プロパティの結果も更新されます。
算出プロパティとメソッドの違いは？
ここまでの内容だけだと、算出プロパティはメソッドと変わらないのではないかと思われるかもしれません。
実際に例として作成した面積を計算する算出プロパティは、メソッドで置き換えることが可能です。
算出プロパティとメソッドの違いは、“算出プロパティが処理の結果をキャッシュする”ことです。
算出プロパティがキャッシュした結果を更新するのは、依存するデータが変更されたときです。
一方、メソッドは常に処理が実行されます。
そのため、次のように現在日時を取得する算出プロパティは、依存するデータがないため何度呼び出しても更新されませんが、メソッドは呼び出すごとに値が変わります。
computed: {
computedNow: function () {
return Date.now();
}
},
methods: {
methodNow() {
return Date.now();
}
}
算出プロパティのメリット・メソッドとの使い分け
それでは、算出プロパティのメリットは何でしょうか？
結果が同じなら、常にメソッドを使えば良いと思われるかもしれません。
算出プロパティのメリットは、結果をキャッシュしているため処理が高速であるという点です。
例えばリストをソートする処理を作成するときに、メソッドで実装するとソートするごとに毎回処理が実行されます。
ソートした結果を算出プロパティとして用意すれば、依存するデータが更新されるまでソート結果をキャッシュするため、処理が速くなります。
まとめ
算出プロパティとメソッドの違いは、”結果をキャッシュするか否か”ということでした。
この性質の違いを利用して、算出プロパティとメソッドのどちらが適しているかを判断して頂ければと想います。
この記事がVue.jsの「算出プロパティ」についての理解を深めるのに役立てば幸いです。
