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

Function API You will use in future

jiko21
July 24, 2019

Function API You will use in future

V-kansai#8の登壇資料です。

jiko21

July 24, 2019
Tweet

More Decks by jiko21

Other Decks in Programming

Transcript

  1. Function API
    You will use in future
    v-kansai Vue.js/Nuxt.js meetup #8
    @Daikids2

    View Slide

  2. খౡ େج / Daiki Kojima
    @Daikids2
    @daikikojima
    ژ౎େֶେֶӃ৘ใֶݚڀՊM2
    Server/Front, Mobile(iOS/Android)…
    Vue fes JPࢀՃ͠·͢!!
    ࠷ۙFlutterָ͕͍͠…

    View Slide

  3. Posted on …
    IUUQTTQFBLFSEFDLDPNEBJLJETGVODUJPOBQJZPVXJMMVTFJOGVUVSF

    View Slide

  4. Today’s Topic
    • Vue 3?
    • Function API

    View Slide

  5. Vue 3?

    View Slide

  6. Vue 3͕ࠓ೥தʹͰΔͬΆ͍
    https://vuefes.jp/2019/

    View Slide

  7. View Slide

  8. RFCʹ͓͚Δݱঢ়
    ௨ͬͨ΋ͷ ৹ٞத ٫Լ
    (MPCBM"1*
    5SFFTIBLJOH
    'VODUJPO"1*
    7NPEFM"1*
    $IBOHF
    $VTUPN%JSFDUJWF

    "1*$IBOHF 

    FUDʜ
    $MBTT4UZMFBQJ
    ※੺ࣈ͸ഁյతมߋ

    View Slide

  9. ͪͳΈʹ…

    View Slide

  10. Global API TreeShaking
    • Vue.<࢖͍͍ͨmodule>͡Όͳͯ͘ɺ

    named exportΛ࢖ͬͯapiΛར༻͢Δ͜ͱʹ…
    • Named exportͳͷͰ

    Webpackʹ͓͍ͯෆཁͳίʔυ(σουίʔυ)

    ͷBundleԽΛ๷͛Δ!!

    View Slide

  11. What’s
    Function API?

    View Slide

  12. Function API?
    • Vue 3ʹͯొ৔(༧ఆ)ͷAPI
    • ࠓͪΐ͏ͲRFCͰٞ࿦த
    • ͜Εࣗମ͸Vue 2Ͱ΋ (ϞδϡʔϧͷಋೖͰ) ར༻Մೳ
    • ࠓ·Ͱͱॻ͖ํ͕ҧ͏?

    →ݟ͍͖ͯ·͠ΐ͏!!

    View Slide

  13. • Πϯετʔϧ͸ͪ͜Β

    • main.jsʹͯ

    ͜ͷΑ͏ʹ

    install
    ಋೖ
    $ npm install vue-function-api --save
    import Vue from "vue";
    import App from "./App.vue";
    import store from "./store";
    import "./registerServiceWorker";
    import { plugin } from 'vue-function-api'
    Vue.use(plugin)

    View Slide

  14. ؆୯ͳαϯϓϧ

    View Slide

  15. ެࣜͷαϯϓϧΛݟͯΈΔ


    count is {{ count }}
    plusOne is {{ plusOne }}
    count++


    IUUQTHJUIVCDPNWVFKTWVFGVODUJPOBQJ

    View Slide

  16. ެࣜͷαϯϓϧΛݟͯΈΔ
    <br/>import { value, computed, watch, onMounted } from 'vue-function-api';<br/>export default {<br/>setup() {<br/>// State<br/>const count = value(0);<br/>// computed state<br/>const plusOne = computed(() => count.value + 1);<br/>// Method<br/>const increment = () => {<br/>count.value++;<br/>};<br/>// watch<br/>watch(<br/>() => count.value * 2,<br/>val => {<br/>console.log(`cont * 2 is ${val}`);<br/>},<br/>);<br/>onMounted(() => {<br/>console.log("mounted");<br/>});<br/>return {<br/>count,<br/>plusOne,<br/>increment<br/>};<br/>},<br/>};<br/>

    View Slide

  17. جຊ
    • ObjectΛ࡞Δ
    • Object಺ʹؔ਺setup()Λఆٛͯ͠ɺ

    ͦͷதʹॲཧΛॻ͍͍ͯ͘
    export default {
    setup() {
    return {};
    },
    };

    View Slide

  18. Dataͷ࡞੒
    • valueΛ࢖͏!
    • Ҿ਺͕ॳظ஋ʹͳͬͯ͘ΕΔΑ!!
    // State
    const count = value(0);

    View Slide

  19. Data΁ͷΞΫηε
    • ม਺໊.valueͰdataͷ஋ʹΞΫηεͰ͖Δ!!
    count.value++;

    View Slide

  20. Computed state
    • ࠓ·Ͱcomputed಺ʹॻ͍͍ͯͨ΋ͷ͸ɺ

    computedؔ਺Λ༻͍Δ…
    const plusOne = computed(() => count.value + 1);

    View Slide

  21. Method
    • Ξϩʔؔ਺Λ࢖ͬͯఆٛ͢Δ͚ͩ!!
    // Method
    const increment = () => {
    count.value++;
    };

    View Slide

  22. Watch
    • ࠓ·ͰͷWatchͱগ͠ॻ͖ํ͕มΘͬͯΔ…
    // watch
    watch(
    // getter
    () => count.value * 2,
    // callback
    val => {
    console.log(`cont * 2 is ${val}`);
    },
    );
    ؂ࢹ͢Δ஋Λؔ਺Ͱฦ͢
    ஋͕มߋ͞ΕͨΒݺͼग़͢

    View Slide

  23. ྫ͑͹…
    • ͜ͷΑ͏ͳ৔߹͸callback͕ݺ͹Εͳ͍
    // watch
    watch(
    // getter
    () => count.value * 0,
    // callback
    val => {
    console.log(`cont * 2 is ${val}`);
    },
    );
    ৗʹ
    HFUUFSͷ஋͕มΘΒݺͼग़͞Εͳ͍

    View Slide

  24. ϥΠϑαΠΫϧؔ܎
    • vue-function-api಺ʹઐ༻ͷؔ਺͕༻ҙ͞Ε͍ͯ·͢…
    • onXXXXͱ͔
    • Ҿ਺ʹؔ਺ΛೖΕͯ΍Ε͹OK
    onMounted(() => {
    console.log("mounted");
    });

    View Slide

  25. ࠷ޙʹ
    • state΍methodͳͲɺએݴͨ͠΋ͷΛreturnͰฦ͢
    return {
    count,
    plusOne,
    increment
    };

    View Slide

  26. View Slide

  27. Propsͱ͔Ͳͳ͍͢Δͷ?

    View Slide

  28. ࣮͸…
    • setupʹҾ਺ͱͯ͠propsΛ௥ه͢Ε͹OK
    • https://github.com/daikikojima/vue-function-api-
    memo

    ʹͯpropsΛ࢖ͬͨ

    ϝϞΞϓϦΛஔ͍ͯ·͢ɻ
    export default {
    props: ['addTodo'],
    setup(props) {
    const text = value('');
    const onAddClick = () => {
    if (text.value !== '') {
    props.addTodo(text.value);
    text.value = '';
    }
    };

    View Slide

  29. ৮ͬͯΈͯͷॴײ
    • ReactͬΆ͍…
    • ࣮ࡍʹRFCͰ΋࿩୊ʹͳͬͨΓԌ্?ͯͨ͠
    • TSͱ΋૬ੑ͕ྑͦ͞͏…

    View Slide

  30. ࠷ޙʹ
    • ͜͜Ͱ͸Ұ෦͔͠঺հ͓ͯ͠Γ·ͤΜɻ

    ΑΓৄ͍͠৘ใ͸

    https://github.com/vuejs/vue-function-api

    ʹࡌͬͯ·͢ɻ

    View Slide

  31. Reference?
    • Vue-function-api

    https://github.com/vuejs/vue-function-api
    • Vue rfc (function apiͷproposal)

    https://github.com/vuejs/rfcs/pull/42
    • αϯϓϧͷίʔυ

    https://github.com/daikikojima/vue-function-api-memo

    View Slide