Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deep Dive Into Vue Composition API

jiko21
October 09, 2019

Deep Dive Into Vue Composition API

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

jiko21

October 09, 2019
Tweet

More Decks by jiko21

Other Decks in Technology

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