おさらいVue Composition API

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

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