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


関連記事

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

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

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

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

1 はじめに2 パンくずリストを上書き2.1 サンプルのHTML2.2 CSSの上書き3 ヘルパーにする4 さいごに はじめに またまたMaterialize関連の記事になります。 Materiali ...

フォロー

blog-page_side_responsive

2020年6月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

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