Pros and Cons で考える Vue 2 Composition API

iCARE Dev Meetup #19
https://icare.connpass.com/event/204553/
https://www.youtube.com/watch?v=2D_dXnaP6yI

Transcript

1. Pros and Cons で考える Vue 2 Composition API @mascii_k iCARE Dev Meetup #19
2. 自己紹介 小柳 昌生 (Masaki Koyanagi) 株式会社ビザスク フロントエンドエンジニア Twitter: @mascii_k
3. Pros and Cons definition and meaning • Pros: 長所、メリット • Cons: 短所、デメリット
4. お話しすること Vue 2 Composition API の導入メリットや注意点を 他の何かと比較することで考察する 1) Options API 2) Vue 3 Composition API 3) React Hooks Vue 2 Composition API
5. mounted created methods computed data ch vs. Options API
6. Pros 型注釈の記述を強いられない • computed プロパティ内の メソッドに戻り値の型注釈 が必要なことが多い • setup 関数内では computed() の型推論が うまくいく 参照: https://jp.vuejs.org/v2/guide/typescript.html
7. Pros ロジックの再利用性が高い • mixins (Options API) ◦ オブジェクトがどのようにマージされるか予想しにくい • use 関数 (composable functions) ◦ ロジックを変更するためのパラメータを渡せる ◦ 型推論できる、テストしやすくなった ◦ VueUse のような Composition API を活用した ユーティリティライブラリも存在する
8. Pros provide() / inject() の使い勝手が良い • inject する側でも型を同期して 使えるようになった • Vuex に頼らずにストアを構成 することもできる • 使い勝手が良すぎるので、濫用 には注意 ◦ Props とカスタムイベントの利用で 十分なことも多い
9. Cons Ref のアンラップを知る必要がある • ref(), computed() の 戻り値は Ref 型！ • computed() は極力テンプ レートのために使う • ref() よりも reactive() を 使った方が良いと思う
10. Cons プラグインがまだ RC 版 • なかなか正式リリースされない…！ ◦ これが原因で導入をためらっている方が多い？ ◦ Vue 3.0 が正式リリース (2020/09) されたタイミン グで、API が根底から変わる可能性は小さくなった けしからん！
11. vs. Vue 3 Composition API
12. 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
13. Cons Vue 3 に比べると変更検知が弱い 実は Composition API の差異より リアクティブの差異の方が大きい！ Vue 2 の「リアクティブの探求」
14. Cons Suspense に対応していない • Vue 3 では、子コンポーネントの async setup() が return するまで 親コンポーネント側でローディング 表示ができる <Suspense> が提供さ れている ◦ Vue 3.0 でも実験的機能とされている ◦ Vue 3.1 で正式リリース？
15. eReducer useCallback useEffect useState xt useMemo vs. React Hooks
16. Pros 従来記法との差異が小さい • クラスコンポーネント ↔ 関数コンポーネント(+ Hooks) ◦ パフォーマンスや無限ループに注意が必要になる ◦ 従来記法を知っていても Hooks は使えない data ↔ reactive() computed ↔ computed() methods ↔ setup で関数を定義 created ↔ setup で実行 mounted ↔ onMounted() watch ↔ watch() • Options API ↔ Composition API ◦ 従来記法との対応関係がわかりや すい
17. Cons 従来記法を引き続き知る必要がある • 関数コンポーネントだけにしていく流れ • Options / Composition API が併存していく流れ ◦ ひとつの vue ファイル内で併記することができ、 その場合は最初に setup が実行される ▪ 型推論がうまくいかないため NG ◦ vue ファイル毎にどちらか一方を使うのは問題ない ▪ 無理にマイグレーションする必要ないと思う
18. まとめ
19. 最新 だからではなく、 Pros and Cons で考えていきましょう まとめ • Vue 2 / 3 は Composition API よりも、 リアクティブに大きな差異がある • Options API / Composition API の差異よりも、 リアクティブの特性に詳しくなると良い