Vue.jsでcomputedを使用する方法について書いています。
最初に算出プロパティの使い方を説明していて、その後にVue.jsのバージョン3(Composition API)と2(Options API)で実際に動作確認したサンプルコードを載せています。
公式の算出プロパティについて書いてあるリンクは下記になります。
・算出プロパティとウォッチャ(Vue2)
・算出プロパティ(Vue3)
Vue.jsの算出プロパティ(computed)とは？
Vue.jsの算出プロパティ(computed)は、ちょっと複雑なデータを表現する時に使用すると便利です。
例えば、価格と税金をデータとして持っていて、金額を計算するには下記のように書くと思います。
<template>
<div class="m-3">
<div>税込価格：{{ Math.round(price * tax) }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
tax: 1.1,
}
},
};
</script>
上記はprice変数に100を入れて、taxが10%として、テンプレート内で計算して表示しています。
表示される内容は「税込価格：110」となります。
これを算出プロパティを使うことで、下記のように簡単に表現することが可能です。
<template>
<div class="m-3">
<div>税込価格：{{ totalValue }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
tax: 1.1,
}
},
computed: {
totalValue: function () {
return Math.round(this.price * this.tax)
}
}
};
</script>
上記では算出プロパティ(computed)を作って、その中にtotalValueを書きました。
プロパティなので、そのまま定義したtotalValueを書くだけです。
こうすることで、結果は同じように「税込価格：110」になりますが、テンプレート内で計算せずに{{ totalValue }}の呼び出しだけで表示が済みます。
メソッドとの違いは?
メソッドでも同じように書くことができます。
<template>
<div class="m-3">
<div>税込価格：{{ totalValue() }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
tax: 1.1,
}
},
methods: {
totalValue: function () {
return Math.round(this.price * this.tax)
}
}
};
</script>
この場合の結果も先ほどと同じになります。
メソッドなので、テンプレートからの呼び出し時に丸括弧「()」が必要になります。メソッドなので引数があれば渡すことも可能です。
メソッド(methods)と算出プロパティ(computed)の違いは算出プロパティは処理内容をキャッシュしますが、メソッドは処理内容をキャッシュしません。
公式のこのあたりに書いています。
算出プロパティは、定義したプロパティの内容が変わらない場合は、一度計算された内容が表示されるということのようです。
このため、高速化が期待できるのではないかと思います。
簡単な内容で、引数を取らないものは算出プロパティとして定義しておくと良さそうです。
算出プロパティを使用したサンプルコード(v3 Composition API)
Vue3のComposition APIを使用して、算出プロパティを使用したサンプルコードを書いてみました。
<template>
<div>
<div class="m-3">
<div>税込価格：{{ totalValue }}</div>
</div>
<input
type="text"
class="p-1 border ring-1 rounded-md border-color-300"
v-model="price"
/>
</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const price = ref(100)
const tax = ref(1.1)
const totalValue = computed(() => {
return Math.round(price.value * tax.value)
})
return {
price,
tax,
totalValue
}
}
};
</script>
コードの解説です。
テキストボックスにv-modelを設定して、price変数を設定しています。
初期値で100が表示されますが、テキストボックスの内容を変えることで、price変数の内容も更新されます。
そして、算出プロパティ(computed)で定義しているtotalValueの表示値も更新され、再表示されます。
スクリプトの中を確認します。
最初にimport文を使用して、refとcomputedを使えるように呼んできています。
setupメソッドの最初で、priceとtax変数を定義して、それぞれ100と1.1で初期化しています。
const price = ref(100)
const tax = ref(1.1)
const totalValue = computed(() => {
return Math.round(price.value * tax.value)
})
totalValueには2つの変数の値を掛けたものを四捨五入して返しています。
最後にそれぞれ定義したものを最後にreturnで返して、画面で使えるようにしています。
動作確認をする
価格を変えると、再度処理されて表示が変わることが確認できました。
算出プロパティを使用したサンプルコード(v2)
上記と同じ内容のコードをVue2で書いてみました。
<template>
<div>
<div class="m-3">
<div>税込価格：{{ totalValue }}</div>
</div>
<input
type="text"
class="p-1 border ring-1 rounded-md border-color-300"
v-model="price"
/>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
tax: 1.1,
}
},
computed: {
totalValue: function () {
return Math.round(this.price * this.tax)
}
}
};
</script>
コメント