Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pros and Cons で考える Vue 2 Composition API

Pros and Cons で考える Vue 2 Composition API

998b440234ba4524a2c1ba1f130728f8?s=128

Masaki Koyanagi

March 17, 2021
Tweet

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 の差異よりも、 リアクティブの特性に詳しくなると良い