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
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/
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 };
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