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. Today’s Topic • What is Composition API? • How to

    write… • ͪΐͬͱߴ౓ͳLogicͷ࠶ར༻
  2. Motivation of Composition API • ϩδοΫ࠶ར༻ͨ͠Γίʔυͷߏ੒·ΘΓ • ࠓͷAPIͩͱoption࢖ͬͯ΍Δ͔Βηϯε͕ཁΔ • ܕਪ࿦

    • thisʹґଘͯͯ͠ܕ͕ͭΒ͍ • IDEͱ͔ͷॿ͚͕ಘΒΕʹ͍͘… https://vue-composition-api-rfc.netlify.com/#motivation
  3. Μ?

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


    ෆ࣮֬ੑ͕ଟ͍(TC39ͱͷ݉Ͷ߹͍) • TSXαϙʔτͱ߹Θͳ͍… https://vue-composition-api-rfc.netlify.com/#motivation
  5. ४උ • ҎԼͷίϚϯυͰύοέʔδΛΠϯετʔϧ
 • main.ts(js)ʹҎԼͷΑ͏ʹॻ͚͹OK npm install @vue/composition-api --save import

    Vue from "vue"; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
  6. ྫ͑͹… • ϑπʔʹॻ͘ͱ
 ͜Μͳ͔Μ͡? 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 = ''; }, }, });
  7. ྫ͑͹… • ͜͏ͳΔ 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 }; } });
  8. ίϯϙʔωϯτͷ࡞Γํ • props͸͍ͭ΋ͷΑ͏ʹॻ͚·͢… import {createComponent, PropType, reactive} from '@vue/composition-api'; const

    TodoForm = createComponent({ props: { onSubmit: { type: Object as PropType<(text: string) => void>, required: true, }, }, });
  9. ίϯϙʔωϯτͷ࡞Γํ • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘… • reactive: Vue.observableͷ͜ͱ
 dataͷΑ͏ʹ࢖͏͜ͱ͕ଟ͍͔΋ • computed: ؔ਺ͷΑ͏ʹॻ͘

    setup(props) { const state = reactive({ text: '', }); const isValid = computed( () => state.text.length > 0 ); ...
  10. ίϯϙʔωϯτͷ࡞Γํ • setupؔ਺಺ʹ৭ʑॻ͍͍ͯ͘… • methods: ؔ਺Λͦͷ··ఆٛ • props͸props.<name>Ͱ࢖͏ • ࠷ޙʹreturnͰఆٛͨ͠΋ͷΛ


    ฦ͢ setup(props) { ... const submit = () => { props.onSubmit(state.text); state.text = ''; }; return { state, submit, isValid }; } });
  11. 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;
  12. 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, }; }, });
  13. Ͳ͏΍Δͷ? • 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;