Vue3 Composition APIについてざっくり勉強し直してみた
はじめに
- 当方Railsをメインにアプリケーションコードを書いております。
- この度「らくしふ」のプロジェクトに参画し、自身のVue力の足りなさについて実感したので、図々しくもアドベントカレンダーにて知識の整理をさせていただきます🙏
- 今回はVue3に慣れるために、Composition APIの概要についてのお話です。
Composition APIとは
個人的ざっくり解釈
- viewの役割から実装をリアクティビティーを維持したまま、切り出せる機能。
- Options APIよりもインスタンスの扱い方が抽象的になり、より記述の自由度が上がった。
なぜ上記のような解釈になったか
- Vue.jsの入門ページでは2つのAPIスタイルが推奨されています。
- Options API
- コンポーネント内で定義した複数のオプションを組み合わせて、コンポーネントのロジックを記述するスタイル。
- コンポーネントのインスタンス this に対し、関数内からアクセスする。
- Composition API
- インポートした各種 API 関数を使ってコンポーネントのロジックを記述するスタイル。
- script setupを使用することで、格段に記述量が減る。
- Options API
- また、どちらを選択するかについては下記のような判断軸があるようです。
- Composition APIは インスタンスへアクセスし、値を初期化、設定、取得する際の挙動をより短く記述できる。
- Options APIはコンポーネントのインスタンスを中心とする考え方で、オブジェクト指向プログラミングを経験している開発者は馴染みがある。リアクティビティーの細かな挙動が抽象化され、APIのグループによって整理されているため、初心者がわかりやすい。
何を解決するために生まれたのか考えてみる
- 上記の公式の説明の通り、コンポーネント記述の自由度を上げることと、記述量を減らすことが目的なのかなと考察します。もう少し長く使ってみて、差分がわかってきたところで記事を更新してみます。
実装
- こちらのコードは個人的に作成中のSPAの一部です。
- ユーザー情報をフォームで表示するコンポーネントです。
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
interface User {
id: number;
name: string;
birthday: Date;
}
const title = ref('ユーザー情報')
const user = reactive({
id: 1,
name: 'hogehoge',
birthday: new Date()
})
onMounted(() => {
// api fetchしてユーザーオブジェクトで受け取る処理とか
})
</script>
<template>
<h1>{{title}}</h1>
<form>
<label for="id">メールアドレス</label>
<input id="id" v-model="user.id" type="text">
<label for="name">電話番号</label>
<input id="name" v-model="user.name" type="text">
<label for="birthday">誕生日</label>
<input id="birthday" v-model="user.birthday" type="text">
</form>
</template>
ref, reactiveについて
-
上記のコードで
ref, reactiveという見慣れない関数が出てきました。 -
refとは、引数の値を受け取り、ミュータブル（可変）なオブジェクトを返します。値は
.valueで参照する事ができます。 -
reactiveとは、リアクティブなオブジェクトのコピーを返します。
- reactiveのコピーはディープコピー(オブジェクトの実体ごと、新たにコピーした変数領域を確保すること)です。元のオブジェクトの値が書き換わることで、連動してコピー先の値も変更されます。
-
refの呼び出し時にジェネリクス引数を渡して、複数の型解釈を持たせる事が可能です。
const strOrNmbr = ref<string | number>('test')
strOrNmbr.value = 123 // 更新できまっせ
- 値の更新は双方向に行われるため、ref・reactiveの両者から更新することが可能です。
まとめ
- 今回はOptions APIとの差分をメインにまとめてみました。
- ref, reactiveの使い分けが分からなかったので、混乱していました😅
- InjectionKey, provide, injectについては次回以降まとめていこうかと思います。
🌟宣伝🌟
株式会社クロスビットでは、デスクレスワーカーのためのHR管理プラットフォームを開発しています。
一緒に開発を行ってくれるエンジニアを募集中です🤗
引用元
Discussion