Deep Dive Into Vue Composition API

06a095e125c2016e983e183e10209b9a?s=47 jiko21
October 09, 2019

Deep Dive Into Vue Composition API

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

06a095e125c2016e983e183e10209b9a?s=128

jiko21

October 09, 2019
Tweet

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