今回はVue3で追加されたComposition APIでのcomputedの記述方法を解説していきます。
Vue3から素のJavascriptに親しい記述方法になって来たのでこれまでのVue特有の書き方とは少し異なるので、Vue2のOptions APIとの違いを見ながら理解を深めて行きましょう。
さっそく、Vue3 Composition APIでのcomputedの記述方法について見ていきましょう！
- node：v16.15.0
- @vue/cli 5.0.4
- npm：8.5.5
今回Vue cli を使っての解説となります。導入方法は下記の公式サイトを参考にしてみてください。
Vue3 computedの書き方
Composition API
計算した結果を表示させるものを例にして考えて行きましょう。
- computedを使うためにインポートをする
- 変数を準備し、computedの処理を書く準備を行う
- HTMLへ計算した結果を表示
流れとしては上記の3工程になります。
Conposition APIを使う際の注意点としては、templateの上に記述をしないと行けません。
<script setup>
import { computed } from 'vue' // 1
const answer = computed(() => { //2
return 1 + 1
})
</script>
<template lang="html">
<div>
<p>{{ answer }}</p> <!-- 3 -->
</div>
</template>Composition APIでの記述方法は素のJavaScriptに近づきましたね。
Options APIの記述方法と比べて見ましょう。
Options API
<template lang="html">
<div>
<p>{{ optionsAnswer }}</p>
</div>
</template>
<script>
export default {
computed: {
optionsAnswer() {
return 1 + 1;
}
}
}
</script>Options APIは素のJavaScriptとは記述方法が多き異なります。
\ Options APIの使ったcomputedの使い方はこちら /
Vue3 computedの活用方法
computed内で条件分岐
computed内では関数のように条件分岐を書くことができます。
計算結果や特定の値によって返す値を決めることができます。
<script setup>
import { computed, ref } from "vue";
const a = ref('5')
const b = ref('8')
const multiplication= computed(() =>{
const answer = a.value * b.value
if(answer <= 50){
return '50以下です。'
} else {
return "50以上です。"
}
})
</script>
<template lang="html">
<div>
<p>計算結果は{{ multiplication }}</p>
</div>
</template>データの結合
ユーザーネームなどの情報を表示する際、DBなどにはfirst_name、last_nameといったように保存されていることが多いです。
こういった際に、
<p>FullName: {{ first_name }} {{ last_name }}</p>のように表示させてもいいですが使い回しができないことや何度も同じ記述をしなくては行けないので、「full_name」といった形で扱うほうが便利です。
<p>FullName: {{ full_name}}</p>上記のほうがスッキリしてすぐになんの情報かわかりますね。
<script setup>
import { computed, ref } from "vue";
const first_name = ref('Taro')
const last_name = ref('Tanaka')
const full_name = computed(() => {
return first_name.value + last_name.value
})
</script>
<template lang="html">
<div>
<p>名字：{{first_name}}</p>
<p>名前：{{ last_name }}</p>
<p>フルネーム：{{ full_name}}</p>
</div>
</template>まとめ
今回はVue3から追加されたComposition APIについて学んで行きました。
Vue3から一気に素のJavaScriptに近づいたので、これまでJavaScriptを学んでいた人は取っ掛かりやすいと思います。
また、JavaScriptを知らない方はOptions APIを使うことで直感的に操作をすることができるので、試してみてください。
Vue3のおすすめの参考書
コメント