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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. mounted
   created
   methods
   computed
   data
   ch
   vs. Options API
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. vs. Vue 3 Composition API
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

15. eReducer
    useCallback
    useEffect
    useState
    xt
    useMemo
    vs. React Hooks
    

    View Slide

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

    View Slide

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

    View Slide

18. まとめ
    

    View Slide

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

    View Slide