Deep Dive Into Vue Composition API

v-kansai#11、京都Devかふぇ#7での登壇資料です!!

Transcript

1. Deep Dive Into Vue Composition API v-kansai Vue.js/Nuxt.js meetup #10 @Daikids2
2. খౡ େج / Daiki Kojima @Daikids2 @jiko21 ژେӃ৘ใֶݚڀՊM2 (20ଔ) ΠϯϑϥҎ֎͍͍ͩͨͳΜͰ΋ Vue fes JPࢀՃ͠·͢!!
3. ͤΜͰΜ! • KFUG 2019Ͱొஃ͠·͢!
4. Posted on … IUUQCJUMZ*[E#-4
5. Today’s Topic • What is Composition API? • How to write… • ͪΐͬͱߴ౓ͳLogicͷ࠶ར༻
6. αϯϓϧίʔυ • GitHub: bit.ly/2Mgwy77 • Demo: bit.ly/2OmiuLQ
7. What is Composition API?
8. What is Composition API? • Vue 3Ͱొ৔༧ఆ?ͷAPI • چ໊: function-api https://github.com/vuejs/rfcs/pull/78
9. Motivation of Composition API • ϩδοΫ࠶ར༻ͨ͠Γίʔυͷߏ੒·ΘΓ • ࠓͷAPIͩͱoption࢖ͬͯ΍Δ͔Βηϯε͕ཁΔ • ܕਪ࿦ • thisʹґଘͯͯ͠ܕ͕ͭΒ͍ • IDEͱ͔ͷॿ͚͕ಘΒΕʹ͍͘… https://vue-composition-api-rfc.netlify.com/#motivation
10. Μ?
11. ܕपΓͳΒ
12. Class Style API͕
 ͋Δ͡ΌΜ?
13. Vue3ʹ͸࠾༻͞Ε·ͤΜ… https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
14. Why Class Style API is dropped? • Vueࣗମɺ৭Μͳ΋ͷΛthisʹͻͬ͘ΔΊͯΔ… • propsΛѻ͏ࡍʹσίϨʔλΛ࢖͏ඞཁ͕͋Γɺ
 ෆ࣮֬ੑ͕ଟ͍(TC39ͱͷ݉Ͷ߹͍) • TSXαϙʔτͱ߹Θͳ͍… https://vue-composition-api-rfc.netlify.com/#motivation
15. How to write…
16. ४උ • ҎԼͷίϚϯυͰύοέʔδΛΠϯετʔϧ
 • main.ts(js)ʹҎԼͷΑ͏ʹॻ͚͹OK npm install @vue/composition-api --save import Vue from "vue"; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
17. ྫ͑͹… • ୯७ͳTodoΞϓϦΛ
 ߟ͑Δ • Root Component Todo.vue
18. ྫ͑͹… • Todo௥Ճ༻ͷϑΥʔϜ TodoForm.vue
19. ྫ͑͹… • Todoදࣔ༻ͷ
 List TodoList.vue
20. TodoForm.vueΛݟͯΈΔ <template> <div class="todo-form"> <input v-model="text"/> <button v-show="isValid" @click="submit">Add</button> </div> </template>
21. ྫ͑͹… • ϑπʔʹॻ͘ͱ
 ͜Μͳ͔Μ͡? import Vue, {PropType} from 'vue'; export default Vue.extend({ name: 'TodoForm', props: { onSubmit: { type: Function as PropType<(text: string) => void>, required: true, }, }, data() { return { text: '', }; }, computed: { isValid(): boolean { return this.text.length > 0; }, }, methods: { submit() { this.onSubmit(this.text); this.text = ''; }, }, });
22. ྫ͑͹… • ͜͏ͳΔ import {computed, createComponent, PropType, reactive} from '@vue/composition-api'; const TodoForm = createComponent({ props: { onSubmit: { type: Object as PropType<(text: string) => void>, required: true, }, }, setup(props) { const state = reactive({ text: '', }); const isValid = computed( () => state.text.length > 0 ); const submit = () => { props.onSubmit(state.text); state.text = ''; }; return { state, submit, isValid }; } });
23. ίϯϙʔωϯτͷ࡞Γํ • createComponentͰίϯϙʔωϯτΛ࡞੒
 (jsͰॻ͘ͳΒexport default {}ͰOK) import {createComponent, PropType, reactive} from '@vue/composition-api'; const TodoForm = createComponent({ ... });
24. ίϯϙʔωϯτͷ࡞Γํ • props͸͍ͭ΋ͷΑ͏ʹॻ͚·͢… import {createComponent, PropType, reactive} from '@vue/composition-api'; const TodoForm = createComponent({ props: { onSubmit: { type: Object as PropType<(text: string) => void>, required: true, }, }, });
25. ίϯϙʔωϯτͷ࡞Γํ • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘… • reactive: Vue.observableͷ͜ͱ
 dataͷΑ͏ʹ࢖͏͜ͱ͕ଟ͍͔΋ • computed: ؔ਺ͷΑ͏ʹॻ͘ setup(props) { const state = reactive({ text: '', }); const isValid = computed( () => state.text.length > 0 ); ...
26. ίϯϙʔωϯτͷ࡞Γํ • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘… • methods: ؔ਺Λͦͷ··ఆٛ • props͸props.<name>Ͱ࢖͏ • ࠷ޙʹreturnͰఆٛͨ͠΋ͷΛ
 ฦ͢ setup(props) { ... const submit = () => { props.onSubmit(state.text); state.text = ''; }; return { state, submit, isValid }; } });
27. σϞ
28. ͪΐͬͱߴ౓ͳLogicͷ࠶ར༻
29. Logic Extraction and Reuse • ίϯϙʔωϯτͷछྨ͸ҧ͑Ͳɺڞ௨ͯ͠࢖͍͍ͨ
 ϩδοΫΛநग़ͯ͠࠶ར༻Ͱ͖Δɻ • ݱߦͷmixinͳͲͱಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ… https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse
30. HOW TO • Component͔Βɺ
 Stateͱɺmethods͚ͩΛ
 Ҿ͖ണ͕ͯؔ͠਺Ͱฦ͢ • ref: reactiveͰՄม(mutable)ͳ
 data import {reactive, ref} from "@vue/composition- api"; const useTodos = () => { const todos = ref([] as string[]); const addTodo = (todo: string) => { todos.value.push(todo); }; const deleteTodo = (position: number) => { todos.value.splice(position, 1); }; return { todos, addTodo, deleteTodo, }; }; export default useTodos;
31. HOW TO • ࢖͍͍ͨComponent಺Ͱ
 ӈهͷΑ͏ʹ࢖༻͢Δ import {createComponent, reactive} from '@vue/ composition-api'; import TodoList from '@/components/normal/TodoList.vue'; import TodoForm from '@/components/normal/TodoForm.vue'; import useTodos from './Store'; const Todo = createComponent({ components: { TodoList, TodoForm, }, setup() { const {todos, deleteTodo, addTodo} = useTodos(); return { todos, deleteTodo, addTodo, }; }, });
32. σϞ
33. ΑΓߴ౓ͳ͜ͱ…
34. ࣮͸ɺ • ͜ͷComposition APIΛ
 ࢖͍͜ͳͤ͹
 ͳΜͪΌͬͯঢ়ଶ؅ཧ͕
 Ͱ͖·͢ ͍ͭ͜Έ͍ͨͳ΍ͭͰ͢ https://vuex.vuejs.org/ja/ ʹ͋ΔVu◦xͷֆ
35. Ͳ͏΍Δͷ? • todosΛؔ਺ͷ֎ʹग़͢
 -> 1ճ͚ͩੜ੒͞ΕΔ! import {reactive, ref} from "@vue/composition-api"; const todos = ref([] as string[]); const useTodos = () => { const addTodo = (todo: string) => { todos.value.push(todo); }; const deleteTodo = (position: number) => { todos.value.splice(position, 1); }; return { todos, addTodo, deleteTodo, }; }; export default useTodos;
36. σϞ
37. ·ͱΊ • Composition API͸ܕਪ࿦ͳͲͷվળΛਤͬͨ
 ͜Ε·Ͱͱ͸Ұຯҧ͏ΦτφͷVue.js • ϩδοΫͷ࠶ར༻͕Ͱ͖ɺͳΜͪΌͬͯঢ়ଶ؅ཧ΋
 Ͱ͖ͪΌ͏!! • ϓϩμΫτʹ࢖͏ͷ͸(·ͩ)࣌ظঘૣ?
38. Reference? • Vue-function-api rfc
 https://vue-composition-api-rfc.netlify.com • API Document
 https://vue-composition-api-rfc.netlify.com/api.html • GitHub
 https://github.com/vuejs/composition-api