Function API You will use in future

Transcript

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

   #8 @Daikids2

2. খౡ େج / Daiki Kojima @Daikids2 @daikikojima ژ౎େֶେֶӃ৘ใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)…

   Vue fes JPࢀՃ͠·͢!! ࠷ۙFlutterָ͕͍͠…

3. Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETGVODUJPOBQJZPVXJMMVTFJOGVUVSF

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

5. Vue 3?

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

7. None

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

   
   $VTUPN
   %JSFDUJWF
 "1*
   $IBOHF 
 FUDʜ $MBTT
   4UZMF
   BQJ ※੺ࣈ͸ഁյతมߋ

9. ͪͳΈʹ…

10. Global API TreeShaking • Vue.<࢖͍͍ͨmodule>͡Όͳͯ͘ɺ
 named exportΛ࢖ͬͯapiΛར༻͢Δ͜ͱʹ… • Named exportͳͷͰ


    Webpackʹ͓͍ͯෆཁͳίʔυ(σουίʔυ)
 ͷBundleԽΛ๷͛Δ!!

11. What’s Function API?

12. Function API? • Vue 3ʹͯొ৔(༧ఆ)ͷAPI • ࠓͪΐ͏ͲRFCͰٞ࿦த • ͜Εࣗମ͸Vue 2Ͱ΋

    (ϞδϡʔϧͷಋೖͰ) ར༻Մೳ • ࠓ·Ͱͱॻ͖ํ͕ҧ͏?
 →ݟ͍͖ͯ·͠ΐ͏!!

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)

14. ؆୯ͳαϯϓϧ

15. ެࣜͷαϯϓϧΛݟͯΈΔ <template> <div class="count"> <span>count is {{ count }}</span> <span>plusOne

    is {{ plusOne }}</span> <button @click="increment">count++</button> </div> </template> IUUQTHJUIVCDPNWVFKTWVFGVODUJPOBQJ

16. ެࣜͷαϯϓϧΛݟͯΈΔ <script> import { value, computed, watch, onMounted } from

    'vue-function-api'; export default { setup() { // State const count = value(0); // computed state const plusOne = computed(() => count.value + 1); // Method const increment = () => { count.value++; }; // watch watch( () => count.value * 2, val => { console.log(`cont * 2 is ${val}`); }, ); onMounted(() => { console.log("mounted"); }); return { count, plusOne, increment }; }, }; </script>

17. جຊ • ObjectΛ࡞Δ • Object಺ʹؔ਺setup()Λఆٛͯ͠ɺ
 ͦͷதʹॲཧΛॻ͍͍ͯ͘ export default { setup()

    { return {}; }, };

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

    value(0);

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

20. Computed state • ࠓ·Ͱcomputed಺ʹॻ͍͍ͯͨ΋ͷ͸ɺ
 computedؔ਺Λ༻͍Δ… const plusOne = computed(() =>

    count.value + 1);

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

    { count.value++; };

22. Watch • ࠓ·ͰͷWatchͱগ͠ॻ͖ํ͕มΘͬͯΔ… // watch watch( // getter () =>

    count.value * 2, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ؂ࢹ͢Δ஋Λؔ਺Ͱฦ͢ ஋͕มߋ͞ΕͨΒݺͼग़͢

23. ྫ͑͹… • ͜ͷΑ͏ͳ৔߹͸callback͕ݺ͹Εͳ͍ // watch watch( // getter () =>

    count.value * 0, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ৗʹ HFUUFSͷ஋͕มΘΒݺͼग़͞Εͳ͍

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

    console.log("mounted"); });

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

26. None

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

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

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

30. ࠷ޙʹ • ͜͜Ͱ͸Ұ෦͔͠঺հ͓ͯ͠Γ·ͤΜɻ
 ΑΓৄ͍͠৘ใ͸
 https://github.com/vuejs/vue-function-api
 ʹࡌͬͯ·͢ɻ

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