・Vue.jsのcomputedの使い方は？
・Composition APIを使ったやり方が知りたい。
こんな疑問にお答えします。
Vue.jsのcomputedとは、データの計算や加工などを行うことができる便利なプロパティ。
実はVue3からComposition APIが追加され、computedの書き方が少し変わったんですよね。
今回は自分用のメモとして、そんなcomputedの使い方をまとめました！
参考にどうぞ
ということで、この記事では「Vue.jsのcomputedの使い方やコード例」について解説していきます！
・computedの使い方【Composition API】
・computedの使い方【Options API】
・computedの使い方【その他の特徴】
目次
【解説】Vue.jsのcomputedの使い方やコード例【Composition API】
まずはcomputedプロパティの基本的な使い方を見ていきましょう。
実は使用するAPIによって書き方が変わるんですよね。
- Composition APIの書き方
- Options APIの書き方
順に解説してきます。
そんなComposition APIを使ったcomputedの使い方がこちら↓
<script setup>
// computed関数をインポート
import { computed } from 'vue';
// 処理を書く
const numItem = computed(() => {
return 10 + 10
})
</script>
<template>
<!-- 表示 -->
<p>計算結果は：{{ numItem }}</p>
</template>この例の処理結果は「20」となります。
主に下記をすればOK。
- computed関数をインポート
- 処理を書く
- マスタッシュ構文で表示
import { computed } from 'vue';処理の書き方は基本的に下記ですね↓
const 変数名 = computed(() => {
return 処理内容
})computedの引数にアロー関数を入れる感じ。
<p>計算結果は：{{ numItem }}</p>
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】 続いてOptions APIを使った書き方がこちら↓
<script>
export default {
computed: {
numItem() {
return 10 + 10;
}
}
};
</script>
<template>
<!-- 表示 -->
<p>計算結果は：{{ numItem }}</p>
</template>【解説】Vue.jsのcomputedのその他の使い方【Composition API】
最後にComposition APIでのcomputedのその他の使い方や特徴について紹介していきます。
- 読み取り専用
- データを結合する
- 条件分岐して使う
順に見ていきましょう。
computedプロパティは読み取り専用となります。
そのため手動で値を変更することができません。
下記７行目のように代入すると、エラーが出るので注意しましょう。
<script setup>
import { computed } from 'vue';
const numItem = computed(() => {
return 10 + 10
})
numItem.value = 20;
</script>ただしcomputedプロパティ内でリアクティブなデータの値を参照することは可能です。
下記はOK。
<script setup>
import { ref, computed } from 'vue';
const subjectA = ref(50);
const scoreComputed = computed(() => {
const result = subjectA.value + 10;
return result
})
</script>
【解説】Vue.jsの「ref」と「reactive」の使い方【リアクティブ】 computedプロパティでは、複数のデータを結合し生成することが可能です。
例として下記ですね。
<script setup>
import { ref, computed } from 'vue';
const temperature = ref('ホット');
const drink = ref('コーヒー');
// 結合する
const drinkItem = computed(() => {
return temperature.value + drink.value
})
</script>
<template>
<p>飲み物は：{{ drinkItem }}</p>
</template>returnで飲み物名を結合して生成してみました。
computedプロパティでは、条件分岐を使用して値を動的に変更できます。
例としては下記コードですね↓
<script setup>
import { ref, computed } from 'vue';
const subjectA = ref(50);
const subjectB = ref(40);
const scoreComputed = computed(() => {
const result = subjectA.value + subjectB.value
if(result <= 75) {
return '平均点以下です'
} else {
return '平均点以上です'
}
})
</script>
<template>
<p>あなたの点数は：{{ scoreComputed }}</p>
</template>数値の大きさによって、返す値を分岐させてみました。
【解説】Vue.jsのcomputedの使い方やコード例【Composition API】：まとめ
- Composition APIとOptions APIでcomputedの書き方が異なる
- Composition APIのcomputedは関数をインポートしてきて使用する
- 読み取り専用
- データの結合や条件分岐が可能
Composition APIのcomputedプロパティを時はためしてみてね！
