Deep Dive Into Vue Composition API

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