FrontEnd

Vue.js 3.0のComposition APIを使ってみた

投稿日:2020年6月15日 更新日:

はじめに

開発が進められている Vue.js 3.0 にて追加される、 Composition API を使った書き方を紹介します。

現在、 Vue.js 3.0.0 beta がリリースされており、こちらを使って実装してきます。

Composition APIとは

はじめに、 Composition API の概要について簡単に紹介します。

こちらに書いてあるとおり、 Composition API とは、コンポーネントロジックの柔軟な構成を可能にする、関数ベースのAPIです。

詳しくは、紹介するコードを見てほしいのですが、 setup 関数の引数に context を渡すことで、emit や $router や $store などに関する処理を外部に切り出すことができます。

環境構築

プロジェクトの作成は、 Vue CLI で行ってください。

プロジェクトを作成したら、プロジェクトのルートディレクトリで以下のコマンドを実行し、 Vue.js 3.0.0 beta を使用できるようにします。

Composition API での書き方

それでは、実際に Composition API での書き方を紹介します。

まず、 Composition API を使って書かれた以下のコードを見てください。

このコードは、画面に「 Count is 0 」と表示するだけのシンプルなコードです。

注目すべき点は、見慣れない setup 関数と reactive 関数です。 Composition API では、リアクティブな値は reactive 関数の引数として渡し、それを setup 関数内で return する Object に含める必要があります。

ここで言う count は、従来の書き方における data に相当します。

他にも、 function 、 watch 、 lifecycle hooks なども全て setup 関数内に定義します。

function

先程のコードにボタンをクリックした時に count の値を1ずつ増加させる処理を追加したコードがこちらです。

コードを見れば分かる通り、 Composition API では function を methods に含める必要がなくなり、代わりに setup 関数の return で返却する Object に含める必要があります。

computed

先程のコードに、 count の2倍の値を返却する computed である double を追加したコードがこちらです。

computed も data と同様に reactive 関数の引数に追加し、 setup 関数で return する object に含めます。

watch

count が3の倍数の時に hoge を、それ以外のときには fuga と表示させるようにします。

watch は setup 関数の中で watch 関数の引数に渡す関数として定義します。 watch を複数個定義したい場合は、 watch 関数を必要な数だけ書けば良いだけです。

lifecycle hooks

mounted 内で count に初期値を設定するようにしたコードがこちらです。

lifecycle hooks は onMounted のように onXXX の形式で提供されてるものを import して定義します。

ただし、 created と beforeCreate に関しては、 setup に置き換わっています。

その他の lifecycle hooks についてはこちらを御覧ください。

ref

ref を使うと、 state.count のように Object にまとめる必要がなくなり、 template タグ内でも直接参照することができます。

値を更新したい場合は、以下のように .value を付ける必要があります。

props と emit

カウントを加算するボタンを別のコンポーネントにしたコードがこちらです。

親コンポーネントから子コンポーネントへ count が渡り、子コンポーネントから emit-increment が emit されます。

props は setup 関数の引数に props として渡し、props.count のようにアクセスします。

emit は setup 関数の引数に context を渡し、 context.emit の引数として実行します。

さいごに

今回は Composition API と TypeScript を組み合わせるところまでは調べきれなかったのですが、型推論が改善されるようなので、7月に予定されている RC版 がリリースされたら再度調べてみたいと思います。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで Webデザインの現場で使えるVue.jsの教科書 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

フォロー

blog-page_side_responsive

2020年6月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。