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

おさらいVue Composition API

E5ab6eb9fc8de68bf1610c7ad0c86155?s=47 texdeath
November 21, 2019

おさらいVue Composition API

Vue3.xのRFCに導入されるVue Composition APIの紹介です。

E5ab6eb9fc8de68bf1610c7ad0c86155?s=128

texdeath

November 21, 2019
Tweet

Transcript

  1. ͓͞Β͍ 7VF$PNQPTJUJPO"1* 1

  2. ๏ ৿ాɹউॣ ๏ ϑϩϯτΤϯυΤϯδχΞ ๏ 3FBDU/PEF7VF /VYU  ๏ 7VFྺ͸ϲ݄ͪΐ͍͘Β͍

    ๏ 5XJUUFS!UFYEFBUI 2
  3. Agenda 1. What is Vue Composition API? 2. Better Type

    Interface 3. Logic Extraction and Reuse 4. More Flexibility Requires More Discipline 5. まとめ 3
  4. What is Vue Composition API Vue 3.xからRFCで組み込まれる関数ベースのAPI ロジックの再利用性を高め、より柔軟な構築を可能にする 4

  5. جຊతͳྫ 5

  6. جຊతͳྫ 6 ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏

  7. جຊతͳྫ 7 ঢ়ଶͷએݴ ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏

  8. جຊతͳྫ 8 ঢ়ଶͷએݴ ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏ ܭࢉͨ͠ঢ়ଶʢࢀরʣΛฦ͢

  9. Better Type Interface TypeScriptへのサポートが大幅に向上 CreateComponentを定義すると型推論が効くようになる 9 import { createComponent }

    from '@vue/composition-api'; const Component = createComponent({ // ͜ͷ಺෦Ͱܕਪ࿦͕ޮ͘Α͏ʹͳΔ }); const Component = { // ͪ͜Βͷίϯϙʔωϯτม਺಺Ͱ͸ܕਪ࿦͕ޮ͔ͳ͍ // ʢTypeScript͕VueͷίϯϙʔωϯτͰ͋Δͱ൑அͰ͖ͳ͍ͨΊʣ };
  10. Logic Extraction and Reuse 関数化することで、任意の機能再利用が容易に 10

  11. More Flexibility Requires More Discipline • 柔軟性を高めるためには、多くの規律が必要 • 適切に運用しないと品質は大きく下がってしまう •

    VuexやRouterを組み合わせるとより難易度が上がる • JavaScriptのコアメカニズムに則った編成を心がける 11
  12. ެࣜͷνϡʔτϦΞϧಈը͕Θ͔Γ΍͍͢ 12 https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

  13. ·ͱΊ •Vue Composition APIを使えば •関数化が楽になる •TypeScriptでの型推論がしやすくなる •柔軟な構築が可能だが、それゆえより高度 な設計が必要 13