Vue 3 Composition API エッセンス

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

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

リアクティブな (変化が自動で 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>

リアクティブなデータに基づいて、新しいリアクティブな値を生成します。
依存するデータが変更されたときだけ再計算されます。キャッシュされるので効率的です。

<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>

リアクティブなオブジェクト (または配列) を作成します。
オブジェクトのプロパティを変更すると、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>

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

特定のリアクティブなデータの変更を監視し、変更があったときに特定の処理を実行します。

<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>

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

Vue 3 Composition API エッセンス

Series

目次

基本要素

`ref()`

`computed()`

応用要素

`reactive()`

`watch()`

Series