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

     $VTUPN%JSFDUJWF
 "1*$IBOHF 
 FUDʜ $MBTT4UZMFBQJ ※੺ࣈ͸ഁյతมߋ
  2. Function API? • Vue 3ʹͯొ৔(༧ఆ)ͷAPI • ࠓͪΐ͏ͲRFCͰٞ࿦த • ͜Εࣗମ͸Vue 2Ͱ΋

    (ϞδϡʔϧͷಋೖͰ) ར༻Մೳ • ࠓ·Ͱͱॻ͖ํ͕ҧ͏?
 →ݟ͍͖ͯ·͠ΐ͏!!
  3. • Πϯετʔϧ͸ͪ͜Β
 • 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)
  4. ެࣜͷαϯϓϧΛݟͯΈΔ <template> <div class="count"> <span>count is {{ count }}</span> <span>plusOne

    is {{ plusOne }}</span> <button @click="increment">count++</button> </div> </template> IUUQTHJUIVCDPNWVFKTWVFGVODUJPOBQJ
  5. ެࣜͷαϯϓϧΛݟͯΈΔ <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>
  6. Watch • ࠓ·ͰͷWatchͱগ͠ॻ͖ํ͕มΘͬͯΔ… // watch watch( // getter () =>

    count.value * 2, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ؂ࢹ͢Δ஋Λؔ਺Ͱฦ͢ ஋͕มߋ͞ΕͨΒݺͼग़͢
  7. ྫ͑͹… • ͜ͷΑ͏ͳ৔߹͸callback͕ݺ͹Εͳ͍ // watch watch( // getter () =>

    count.value * 0, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ৗʹ HFUUFSͷ஋͕มΘΒݺͼग़͞Εͳ͍
  8. ࣮͸… • 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 = ''; } };