まもなくやってくる Vue.js 3

38bee248082f6071230de65e9d74a944?s=47 kazupon
February 01, 2020

まもなくやってくる Vue.js 3

38bee248082f6071230de65e9d74a944?s=128

kazupon

February 01, 2020
Tweet

Transcript

  1. 3.

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

    Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
  2. 10.
  3. 14.

    ެࣜϓϥάΠϯ/πʔϧ܊͸ରԠத • Vue Router • Vuex • Vue DevTools •

    Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
  4. 32.
  5. 36.

    Ҿ਺ʹ props ͱ context ͕౉͞ΕΔ • props: 
 ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ •

    context: 
 ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬౰ • emit: Vue 2.x ͷ $emit ʹ૬౰ • slots: Vue 2.x ͷ $slots ʹ૬౰
  6. 40.

    Vue 2.x ͱͷϚοϐϯά beforeCreate created beforeMount mounted updated beforeDestroy destroyed

    errorCaptured setup setup onBeforeMount onMounted onUpdated onBeforeUnmount onUnmounted onErrorCaptured (ࠨ: Vue 2.xɺӈ: Vue 3 Ҏ߱)
  7. 44.

    provide / inject • Vue 2.x Ͱ΋ఏ ڙ͞Ε͍ͯͨ DI Λ

    Vue 3.0 Ͱ΋ಉ͡Α͏ ʹར༻Ͱ͖Δ
  8. 46.

    ϓϥάΠϯ͸ DI Ͱ࣮૷Λਪ঑ • Vue 3.0 Ҏ߱Ͱ͸ɺϓϥάΠϯ։ൃ͸ provide / inject

    Λ࢖ͬͨύλʔϯΛਪ঑ • Vue 2.x ·Ͱͷ໰୊఺ • $xxx Ͱґଘ͕஫ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ೉͍͠ • ϓϥάΠϯͰ࣮૷͞Εͨίϯϙʔωϯτ͸ɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍
  9. 47.

    DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ

    DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ (͝ར༻͸ܭըతʹ)
  10. 49.

    ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠৔߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ

    API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup ಺Ͱ this.xxx ͸ෆՄ • Φϓγϣϯ API ଆ͔Β͸ ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ
  11. 51.
  12. 56.

    Root ཁૉͰϥοϓ͢Δ໰୊఺ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ

    HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
  13. 61.

    ϙʔλϧͱ͸ • ίϯϙʔωϯτ಺ͷ͋ ΔίϯςϯπΛVueͷ ඳըର৅֎ͷཁૉʹඳ ը͢ΔͨΊͷ࢓૊Έ • WICG ͷ Portals

    ͱ͸ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰ஫ҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
  14. 62.

    Ϣʔεέʔε • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹
 z-indexɺposition: absolute ۦ࢖ͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ •

    ϖʔδ্ͷ΢ΟδΣοτ
 ֎෦ͷԿΒ͔ͷ΢ΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δ΋ͷ
  15. 63.

    Vue 2.x ͰϙʔλϧΛ࢖༻͢Δʹ͸ ... • ϓϥάΠϯ vue-portal Λ࢖͏ඞཁ͕͋ͬͨ
 
 


    
 https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱Ͱ͸ɺԾ૝ DOM ϨϕϧͰϙʔ λϧ͕࣮૷͞Ε͍ͯΔ
  16. 71.
  17. 72.
  18. 74.
  19. 80.

    Vue 3.0 Ҏ߱ͷ৽࢓༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ •

    طଘͷه๏͸ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠͸ ޓ׵ੑΛαϙʔτ ༧ఆ
  20. 83.

    ::v-slotted() ٖࣅΫϥε • ਌͔Βࢠʹ౉͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ

    πʹ͸໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
  21. 85.

    ::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ <style scoped> ಺ͰఆٛͰ͖Δ • ैདྷ͸ SFC

    ίϯϙʔωϯτ಺ʹ <style scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠
  22. 88.

    Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳ͸࡟আ͞ ΕΔ • slot

    ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε ϩοτ
  23. 90.

    ϑΟϧλ͸࡟আ • ύΠϓԋࢉࢠ ( | ) Λ࢖ͬͨϑΟϧλ͸ɺ ͍ͭʹ Vue 3.0

    Ͱ࡟আ͞ΕΔ
 
 
 • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػ ೳ͸αϙʔτ͞ΕΔ(༧ఆ)
  24. 91.

    ୅ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ ม׵ͯ͠࢖͏

    • Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠࢖͏ • @vue/compiler-core Ͱੜ੒͞Εͨ render ؔ ਺ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ࢖͏
  25. 93.

    Event Emitter ܥ API ͷ࡟আ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API ͸࡟আ͞ΕΔ༧ఆ

    • $on • $off • $once • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸ αϙʔτ͞ΕΔ(༧ఆ)
  26. 96.

    I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ໰୊͕͋ͬͨ •

    ୯ମςετ͠ʹ͍͘
 ঢ়ଶͷϦηοτ΋͘͠͸ϦηοτͰ͖ͳ͍
 (Vue.config.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳ਺ͷ Vue ΠϯελϯεؒͰঢ়ଶΛ੔ ߹ͤ͞Δͷ͕೉͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍΋͋Δ
  27. 97.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    createApp ͰΠϯελϯεΛੜ੒
  28. 98.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    productionTip ͸ Vue 3.0 Ͱ͸࡟আ
  29. 99.
  30. 100.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    Vue 3.0 Ͱ͸໊લΛมߋ 
 (ओͳ༻్͸ TS Ͱ ܕ෇͚Λαϙʔτ͢ΔͨΊ)
  31. 101.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    ΤϯτϦϙΠϯτϨϕϧͷ provide ΋ఏڙ͢Δ
  32. 102.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    DOM ΁ͷ Ϛ΢ϯτํ๏͸ಉ͡
  33. 103.
  34. 104.

    • ίϯϙδγϣϯ API ʹΑΓେن໛։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ૷ͷදݱྗ͕ߴ·Γ·͢ • Vue

    2.x ͔Βͷ breaking change తͳมߋ΋͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏
 (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ
  35. 105.