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