Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactivity Transform

kazupon
August 17, 2022

Reactivity Transform

kazupon

August 17, 2022
Tweet

More Decks by kazupon

Other Decks in Technology

Transcript

  1. PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group

    Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
  2. ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef()

    • $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ
  3. ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef()

    • $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ ϦΞΫςΟϏςΟपΓͷৼΔ෣͍ ΛऔΓѻ͏ϚΫϩ
  4. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠ • reactive: • ΦϒδΣΫτσʔ λߏ଄ •

    number ΍ string ͳͲͷϓϦϛςΟ ϒͳ஋͸ॲཧͰ͖ ͳ͍
  5. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠ • ref: • ϓϦϛςΟϒͳ஋ Λѻ͍Մೳ •

    ΦϒδΣΫτ΋Մ ೳ • `.value` ͰΞΫηε ͠ͳ͍ͱ͍͚ͳ͍
  6. ެࣜͰఏڙ͢Δπʔϧ • VS Code ֦ு • Volar • ESLint ϓϥάΠϯ

    • eslint-plugin-vue (ϧʔϧఏڙ༧ఆ) • όϯυϥ޲͚ϓϥάΠϯɾϩʔμʔ • Vite: `@vitejs/plugin-vue@^2.0.0` • Webpack: `vue-loader@^17.0.0`
  7. ·ͱΊ • Reactivity Transform ͸ϦΞΫςΟϏςΟप Γͷ໰୊Λղܾ͢ΔͨΊͷ΋ͷ • ίϯύΠϥϚΫϩΛ࢖͏͜ͱͰ໰୊Λղܾ͢ Δ͜ͱ͕Ͱ͖Δ •

    ෭࡞༻΋͋ΔͷͰ࢖͏ͱ͖͸஫ҙ͕ඞཁ • αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ ͠ΐʹ࢖͏ͱ DX ΛߴΊΒΕΔ