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
   

   View Slide

2. খౡ େج / Daiki Kojima
   @Daikids2
   @jiko21
   ژେӃ৘ใֶݚڀՊM2 (20ଔ)
   ΠϯϑϥҎ֎͍͍ͩͨͳΜͰ΋
   Vue fes JPࢀՃ͠·͢!!
   

   View Slide

3. ͤΜͰΜ!
   • KFUG 2019Ͱొஃ͠·͢!
   

   View Slide

4. Posted on …
   IUUQCJUMZ*[E#-4
   

   View Slide

5. Today’s Topic
   • What is Composition API?
   • How to write…
   • ͪΐͬͱߴ౓ͳLogicͷ࠶ར༻
   

   View Slide

6. αϯϓϧίʔυ
   • GitHub: bit.ly/2Mgwy77
   • Demo: bit.ly/2OmiuLQ
   

   View Slide

7. What is Composition API?
   

   View Slide

8. What is Composition API?
   • Vue 3Ͱొ৔༧ఆ?ͷAPI
   • چ໊: function-api
   https://github.com/vuejs/rfcs/pull/78
   

   View Slide

9. Motivation of Composition API
   • ϩδοΫ࠶ར༻ͨ͠Γίʔυͷߏ੒·ΘΓ
   • ࠓͷAPIͩͱoption࢖ͬͯ΍Δ͔Βηϯε͕ཁΔ
   • ܕਪ࿦
   • thisʹґଘͯͯ͠ܕ͕ͭΒ͍
   • IDEͱ͔ͷॿ͚͕ಘΒΕʹ͍͘…
   https://vue-composition-api-rfc.netlify.com/#motivation
   

   View Slide

10. Μ?
    

    View Slide

11. ܕपΓͳΒ
    

    View Slide

12. Class Style API͕

    ͋Δ͡ΌΜ?
    

    View Slide

13. Vue3ʹ͸࠾༻͞Ε·ͤΜ…
    https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
    

    View Slide

14. Why Class Style API is dropped?
    • Vueࣗମɺ৭Μͳ΋ͷΛthisʹͻͬ͘ΔΊͯΔ…
    • propsΛѻ͏ࡍʹσίϨʔλΛ࢖͏ඞཁ͕͋Γɺ

    ෆ࣮֬ੑ͕ଟ͍(TC39ͱͷ݉Ͷ߹͍)
    • TSXαϙʔτͱ߹Θͳ͍…
    https://vue-composition-api-rfc.netlify.com/#motivation
    

    View Slide

15. How to write…
    

    View Slide

16. ४උ
    • ҎԼͷίϚϯυͰύοέʔδΛΠϯετʔϧ

    • main.ts(js)ʹҎԼͷΑ͏ʹॻ͚͹OK
    npm install @vue/composition-api --save
    import Vue from "vue";
    import VueCompositionApi from '@vue/composition-api';
    Vue.use(VueCompositionApi);
    

    View Slide

17. ྫ͑͹…
    • ୯७ͳTodoΞϓϦΛ

    ߟ͑Δ
    • Root Component
    Todo.vue
    

    View Slide

18. ྫ͑͹…
    • Todo௥Ճ༻ͷϑΥʔϜ
    TodoForm.vue
    

    View Slide

19. ྫ͑͹…
    • Todoදࣔ༻ͷ

    List
    TodoList.vue
    

    View Slide

20. TodoForm.vueΛݟͯΈΔ
    
    
    
    Add
    
    
    

    View Slide

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 = '';
    },
    },
    });
    

    View Slide

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
    };
    }
    });
    

    View Slide

23. ίϯϙʔωϯτͷ࡞Γํ
    • createComponentͰίϯϙʔωϯτΛ࡞੒

    (jsͰॻ͘ͳΒexport default {}ͰOK)
    import {createComponent, PropType, reactive} from '@vue/composition-api';
    const TodoForm = createComponent({
    ...
    });
    

    View Slide

24. ίϯϙʔωϯτͷ࡞Γํ
    • props͸͍ͭ΋ͷΑ͏ʹॻ͚·͢…
    import {createComponent, PropType, reactive} from '@vue/composition-api';
    const TodoForm = createComponent({
    props: {
    onSubmit: {
    type: Object as PropType<(text: string) => void>,
    required: true,
    },
    },
    });
    

    View Slide

25. ίϯϙʔωϯτͷ࡞Γํ
    • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘…
    • reactive: Vue.observableͷ͜ͱ

    dataͷΑ͏ʹ࢖͏͜ͱ͕ଟ͍͔΋
    • computed: ؔ਺ͷΑ͏ʹॻ͘
    setup(props) {
    const state = reactive({
    text: '',
    });
    const isValid = computed(
    () => state.text.length > 0
    );
    ...
    

    View Slide

26. ίϯϙʔωϯτͷ࡞Γํ
    • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘…
    • methods: ؔ਺Λͦͷ··ఆٛ
    • props͸props.Ͱ࢖͏
    • ࠷ޙʹreturnͰఆٛͨ͠΋ͷΛ

    ฦ͢
    setup(props) {
    ...
    const submit = () => {
    props.onSubmit(state.text);
    state.text = '';
    };
    return {
    state,
    submit,
    isValid
    };
    }
    });
    

    View Slide

27. σϞ
    

    View Slide

28. ͪΐͬͱߴ౓ͳLogicͷ࠶ར༻
    

    View Slide

29. Logic Extraction and Reuse
    • ίϯϙʔωϯτͷछྨ͸ҧ͑Ͳɺڞ௨ͯ͠࢖͍͍ͨ

    ϩδοΫΛநग़ͯ͠࠶ར༻Ͱ͖Δɻ
    • ݱߦͷmixinͳͲͱಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ…
    https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse
    

    View Slide

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;
    

    View Slide

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,
    };
    },
    });
    

    View Slide

32. σϞ
    

    View Slide

33. ΑΓߴ౓ͳ͜ͱ…
    

    View Slide

34. ࣮͸ɺ
    • ͜ͷComposition APIΛ

    ࢖͍͜ͳͤ͹

    ͳΜͪΌͬͯঢ়ଶ؅ཧ͕

    Ͱ͖·͢
    ͍ͭ͜Έ͍ͨͳ΍ͭͰ͢
    https://vuex.vuejs.org/ja/ ʹ͋ΔVu○xͷֆ
    

    View Slide

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;
    

    View Slide

36. σϞ
    

    View Slide

37. ·ͱΊ
    • Composition API͸ܕਪ࿦ͳͲͷվળΛਤͬͨ

    ͜Ε·Ͱͱ͸Ұຯҧ͏ΦτφͷVue.js
    • ϩδοΫͷ࠶ར༻͕Ͱ͖ɺͳΜͪΌͬͯঢ়ଶ؅ཧ΋

    Ͱ͖ͪΌ͏!!
    • ϓϩμΫτʹ࢖͏ͷ͸(·ͩ)࣌ظঘૣ?
    

    View Slide

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
    

    View Slide