DEV Community

nabbisen
nabbisen

Posted on • Originally published at scqr.net

Vue 3 Composition API エッセンス

#vue #typescript #spa #webdev

Vue 3 では、Composition API という新しい API が導入され、より柔軟で再利用しやすいコードを書けるようになりました。それまでの Options API (data, methods, computedなどで区切る形式) に比べて、関連するロジックをまとめて記述できるのが特徴です。

Composition API の核となる関数群を見てみましょう。

基本要素

ref()

  • リアクティブな (変化が自動で UI に反映される) 変数を作成します。
  • プリミティブ型 (文字列, 数値など) の値をリアクティブにしたい場合に使います。
  • 値にアクセスする際は .value を付けます。 (例: myVariable.value) 
<template> <p>カウント: {{ count }}</p> <button @click="increment">カウントアップ</button> </template> <script setup> import { ref } from 'vue' // リアクティブな変数として count を定義 const count = ref(0) const increment = () => { // .value で値にアクセス count.value++ } </script>
Enter fullscreen mode Exit fullscreen mode

computed()

  • リアクティブなデータに基づいて、新しいリアクティブな値を生成します。
  • 依存するデータが変更されたときだけ再計算されます。キャッシュされるので効率的です。 
<template> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>フルネーム: {{ fullName }}</p> <!-- computed へのアクセスが複数あっても計算は一度だけ。効率的 --> <p>例えば footer で再表示など: {{ fullName }}</p> </template> <script setup> import { ref, computed } from 'vue' const firstName = ref('名') const lastName = ref('姓') // firstName か lastName が変更されたら fullName が再計算される const fullName = computed(() => { return `${firstName.value} ${lastName.value}` }) </script>
Enter fullscreen mode Exit fullscreen mode

応用要素

reactive()

  • リアクティブなオブジェクト (または配列) を作成します。
  • オブジェクトのプロパティを変更すると、UI に自動で反映されます。 
<template> <p>名前: {{ user.name }} (年齢: {{ user.age }})</p> <button @click="updateAge">年齢を上げる</button> </template> <script setup> import { reactive } from 'vue' const user = reactive({ name: 'アリス', age: 25 }) const updateAge = () => { user.age++ } </script>
Enter fullscreen mode Exit fullscreen mode

ただし配列に関して、リアクティブシステムがトリガーされる操作は限定されています (push(), splice() 等)。 配列を再作成しないとリアクティブシステムがトリガーされない場合があることにご注意ください。

watch()

  • 特定のリアクティブなデータの変更を監視し、変更があったときに特定の処理を実行します。 
<template> <input type="number" v-model="watchTarget"> <p v-if="message">{{ message }}</p> </template> <script setup> import { ref, watch } from 'vue' const watchTarget = ref(0) const message = ref('') watch(watchTarget, (newValue, oldValue) => { if (newValue > 10) { message.value = '値が 10 を超えました !' } else { message.value = '' } console.log(`値が ${oldValue} から ${newValue} に変わりました`) }) </script>
Enter fullscreen mode Exit fullscreen mode

これらの関数を組み合わせることで、複雑なロジックも整理して記述できるようになります。

Top comments (0)