[Vue.js3] Composition APIのわかりやすい解説

スポンサーリンク

概要

Vue.js 3から導入されたComposition APIについて、簡単にまとめました。

  • Vue.js 2の記述方法はOptions APIと呼ばれる。
  • Vue.js 3ではComposition APIが導入された。
  • Vue.js 3ではOptions API・Composition APIのどちらの記述でも動作するが、Composition APIの方が再利用性や可読性に優れている。

Composition API

Composition APIの記述方法

  • import { xxx } from 'vue'で必要な関数をvueパッケージからimportする
  • 糖衣構文（簡単に記述できる）と糖衣構文を使わない記述方法がある

糖衣構文の場合

  • script要素を<script setup>と記述する
  • export defaultの記述は不要である
  • 宣言した変数・関数は<template>内からアクセスできる
<script setup>
import { ref } from 'vue'

const count = ref(0)
const countUp = () => {
  count.value++
}
</script>
<template>
  <h1 @click="countUp">{{ count }}</h1>
</template>

糖衣構文を使わない場合

  • default exportするオブジェクトにsetup関数を定義する
  • <template>内からアクセスする変数・関数は、setup関数のreturnに含める
<script>
import { ref } from 'vue'

export default ({
  setup() {
    const count = ref(0)
    const countUp = () => {
      count.value++
    }
    return { count, countUp }
  }
})
</script>
<template>
  <h1 @click="countUp">{{ count }}</h1>
</template>

ref関数

  • リアクティブにしたい値はref関数に引数として渡す
    （オブジェクトの場合はreactive関数を使ってもよい。詳細は後述）
  • ref関数は値をラップしたRefImplオブジェクトを返す
  • <script>の中では、リアクティブにした値へのアクセスには.valueが必要となる
  • <template>の中では、リアクティブにした値へのアクセスに.valueは不要である
    （自動的にアンラップされる）

糖衣構文の場合

<script setup>
import { ref } from 'vue'

const count = ref(0)
const msg = ref('hello')
const handleClick = () => {
  count.value = 100
  msg.value = 'Bye'
}
</script>
<template>
  <h1 @click="handleClick">{{ count }}: {{ msg }}</h1>
</template>

糖衣構文を使わない場合

<script>
import { ref } from 'vue'
export default ({
  setup() {
    const count = ref(0)
    const msg = ref('hello')
    const handleClick = () => {
      count.value++
    }
    return { count, msg, handleClick }
  }
})
</script>
<template>
  <h1 @click="handleClick">{{ count }}: {{ msg }}</h1>
</template>

reactive関数

  • reactive関数はオブジェクト（配列、Mapなども可能）をリアクティブにする
  • 以下のデメリットがあるので注意
    • プロパティを関数に渡すとリアクティブにならない
    • 分割代入やスプレッド構文を使うとリアクティブにならない

糖衣構文の場合

<script setup>
import { reactive } from 'vue'

const obj = reactive({num: 0})
const countUp = () => {
  obj.num++
}
</script>
<template>
  <input type="number" v-model.number="obj.num">
  <button type="button" @click="countUp">countUp</button>
</template>

糖衣構文を使わない場合

<script>
import { reactive } from 'vue'

export default ({
  setup() {
    const obj = reactive({num: 0})
    const countUp = () => {
      obj.num++
    }
    return {
      obj,
      countUp
    }
  }
})
</script>
<template>
  <input type="number" v-model.number="obj.num">
  <button type="button" @click="countUp">countUp</button>
</template>
スポンサーリンク

コメント