Vue3 Composition APIの勉強 - スマレジエンジニアyushiのブログ

先日Vue3が公開になりました。

今回はVue3の目玉機能の一つ、Composition APIを触ってみます。

公式ドキュメントはこの辺りです。

Composition APIを利用する主なメリットは、ロジックをComponentから切り出し、個別に管理したり複数のComponentで共有できることです。

これはまさに欲しかった機能...。Vue2でやるならmixinかと思いますが、Composition APIは完全にモジュールとして切りだせる感じで、結合が疎に感じます。

Vue2バージョンも製作されていますが、こちらはまだBetaです。

公式の一番簡単な例は、こちらかと思います。

これを元に、プラスαで実装したものがこちらです。

dockerやMakefileの環境は、下記の記事で紹介した通りです。

今回は、プロジェクト作成にViteを使っています。

Viteは、開発時はbundleしないから速いそうな...？

確かに、かなり速いような気がしますが...。もう少し触ってみたいと思います。現在RC（リリース候補版）です。

f:id:yushi0:20201116003606p:plain

画面はこんな感じです。ロゴや「Hello Vue 3.0 + Vite」、「Edit ~」の箇所はViteが生成したまんまです。

「Count is ... 」のボタンをクリックすると、Count is が1ずつ増え、double is はその倍になります。「add」のボタンで、好きな数値を足し引きできます。

stateの中にcountと、doubleを持っています。reactiveで囲っているので、.vueファイルのscriptタグ内で書いた時と同様に、reactiveに動作してくれます（値が更新されたら、画面などに反映される）。

countを操作するための、increment、addというメソッドを定義しています。

この3点をObjectとして返却するメソッドを、export defaultしています。

counter.jsをこのHelloWorld.vueでimportしています。

Composition APIでは、setup内で諸々を定義しreturnすると、Component内で呼び出せるようです。

今回は、counter.jsからimportしたメソッドの返り値を、setupの返り値としています。

その結果、templateタグ内でstate、add、incrementが使えるようになっています。