Pros and Cons で考える Vue 2 Composition API @mascii_k iCARE Dev Meetup #19

自己紹介 小柳 昌生 (Masaki Koyanagi) 株式会社ビザスク フロントエンドエンジニア Twitter: @mascii_k

Pros and Cons definition and meaning ● Pros: 長所、メリット ● Cons: 短所、デメリット

お話しすること Vue 2 Composition API の導入メリットや注意点を 他の何かと比較することで考察する 1) Options API 2) Vue 3 Composition API 3) React Hooks Vue 2 Composition API

mounted created methods computed data ch vs. Options API

Pros 型注釈の記述を強いられない ● computed プロパティ内の メソッドに戻り値の型注釈 が必要なことが多い ● setup 関数内では computed() の型推論が うまくいく 参照: https://jp.vuejs.org/v2/guide/typescript.html

Pros ロジックの再利用性が高い ● mixins (Options API) ○ オブジェクトがどのようにマージされるか予想しにくい ● use 関数 (composable functions) ○ ロジックを変更するためのパラメータを渡せる ○ 型推論できる、テストしやすくなった ○ VueUse のような Composition API を活用した ユーティリティライブラリも存在する

Pros provide() / inject() の使い勝手が良い ● inject する側でも型を同期して 使えるようになった ● Vuex に頼らずにストアを構成 することもできる ● 使い勝手が良すぎるので、濫用 には注意 ○ Props とカスタムイベントの利用で 十分なことも多い

Cons Ref のアンラップを知る必要がある ● ref(), computed() の 戻り値は Ref 型！ ● computed() は極力テンプ レートのために使う ● ref() よりも reactive() を 使った方が良いと思う

Cons プラグインがまだ RC 版 ● なかなか正式リリースされない…！ ○ これが原因で導入をためらっている方が多い？ ○ Vue 3.0 が正式リリース (2020/09) されたタイミン グで、API が根底から変わる可能性は小さくなった けしからん！

vs. Vue 3 Composition API

Pros IE11 に対応できる ● リアクティブの仕組みが異なる ○ Vue 2 は ES6 Proxy を利用していない ○ Vue 3 は ES6 Proxy を利用している ■ IE11 互換ビルドは提供されない可能性がある (Evan You, Vuejs Amsterdam 2021) 詳細は Vue 2 / 3 ドキュメントの 「リアクティブの探求」を参照 https://www.youtube.com/watch?v=El8Jw2CFj7g&t=2221s

Cons Vue 3 に比べると変更検知が弱い 実は Composition API の差異より リアクティブの差異の方が大きい！ Vue 2 の「リアクティブの探求」

Cons Suspense に対応していない ● Vue 3 では、子コンポーネントの async setup() が return するまで 親コンポーネント側でローディング 表示ができる が提供さ れている ○ Vue 3.0 でも実験的機能とされている ○ Vue 3.1 で正式リリース？

eReducer useCallback useEffect useState xt useMemo vs. React Hooks

Pros 従来記法との差異が小さい ● クラスコンポーネント ↔ 関数コンポーネント(+ Hooks) ○ パフォーマンスや無限ループに注意が必要になる ○ 従来記法を知っていても Hooks は使えない data ↔ reactive() computed ↔ computed() methods ↔ setup で関数を定義 created ↔ setup で実行 mounted ↔ onMounted() watch ↔ watch() ● Options API ↔ Composition API ○ 従来記法との対応関係がわかりや すい

Cons 従来記法を引き続き知る必要がある ● 関数コンポーネントだけにしていく流れ ● Options / Composition API が併存していく流れ ○ ひとつの vue ファイル内で併記することができ、 その場合は最初に setup が実行される ■ 型推論がうまくいかないため NG ○ vue ファイル毎にどちらか一方を使うのは問題ない ■ 無理にマイグレーションする必要ないと思う

まとめ

最新 だからではなく、 Pros and Cons で考えていきましょう まとめ ● Vue 2 / 3 は Composition API よりも、 リアクティブに大きな差異がある ● Options API / Composition API の差異よりも、 リアクティブの特性に詳しくなると良い