Function API You will use in future

06a095e125c2016e983e183e10209b9a?s=47 jiko21
July 24, 2019

Function API You will use in future

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

06a095e125c2016e983e183e10209b9a?s=128

jiko21

July 24, 2019
Tweet

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ʜ $MBTT4UZMFBQJ ※੺ࣈ͸ഁյతมߋ
  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