Function API You will use in future

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

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