Vue
![まっつん]()
VueのComputedを使う方法（算出プロパティ）
VueのComputedを使う方法（算出プロパティ）について解説します
PR
算出プロパティとは？
単純に計算するときに使う機能と考えて良いです。
Vue の表示を書く template 内で、計算結果や文字列結合された結果を表示したい時に、
テンプレートの中にロジック的なことを詰め込むと、読みづらくなります。
計算や、文字の結合のロジックは Computed に書き、表示のところはその結果の関数を書きましょう、というのが算出プロパティです。
computed（算出プロパティ）を使うと
<template>
<div>{{ sumAB }}</div>
</template>
<script setup>
import { ref, computed } from "vue"
const a = ref(1)
const b = ref(2)
const sumAB = computed(() => {
return a.value + b.value
})
</script>computed（算出プロパティ）を使わない
<template>
<div>{{ a + b }}</div>
</template>
<script setup>
import { ref } from "vue"
const a = ref(1)
const b = ref(2)
</script>computed を使わないと複雑な計算の ときごちゃごちゃする
例えば a+bが3のとき「3だよ」と出力し、それ以外の時「違うよ」と出力 ロジックを書いてみましょう。
const result = computed(() => {
const sumAB = a.value + b.value
if (sumAB === 3) {
return "3だよ"
} else {
return "違うよ"
}
})今回の例だと１行で書く方法もあるのでアレなのですが、if 文などを使って条件によって出力が変わる時を考えると、この computed を使わないと表示がごちゃごちゃしてしまうことが分かります。
computed を使う方法
Vue 3（setup）を使う時
<template>
<div>{{ result }}</div>
</template>
<script setup>
import { ref, computed } from "vue"
const a = ref(1)
const b = ref(2)
const result = computed(() => {
const sumAB = a.value + b.value
if (sumAB === 3) {
return "3だよ"
} else {
return "違うよ"
}
})
</script>必要なものを import
import { ref, computed } from "vue"変数の初期値（リアクティブ）を定義
const a = ref(1)
const b = ref(2)computed を使う
resultが関数名。
returnされるものが最終的に出力される結果です。
const result = computed(() => {
const sumAB = a.value + b.value
if (sumAB === 3) {
return "3だよ"
} else {
return "違うよ"
}
})表示する
<div>{{ result }}</div>Vue 2 のとき
Vue 2 のときはこのように書きます。
<template>
<div>{{ result }}</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: 2,
}
},
computed: {
result() {
const sumAB = a.value + b.value
if (sumAB === 3) {
return "3だよ"
} else {
return "違うよ"
}
},
},
}
</script>computed の特徴
リアクティブな変数が更新された際に再評価される
リアクティブな変数とは、ここでの例だと ref を使った部分です
const a = ref(1)
const b = ref(2)a と b が変更された時に再評価（再計算）されます。
キャッシュされる
a か b が変更されない限り、再びこの関数が実行されることはなく、即座にキャッシュされた内容を返します。
この挙動については、ページ遷移やコンポーネントの表示・非表示切り替えなどの実装をする際に影響し、仕様次第では computed ではなく通常の関数を使った方が良いパターンもあるかもしれません。
終わりに
Vue 3 で setup の書き方と Vue 2 の書き方を比較してみると結構変わったなーという印象です。
もっと深く知りたい方はこのページに全て書いてありますので、確認してみてください。
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
