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


関連記事

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

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

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

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年6月
 123456
78910111213
14151617181920
21222324252627
282930 

アプリ情報

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