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

38bee248082f6071230de65e9d74a944?s=47 kazupon
February 01, 2020

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

February 01, 2020
Tweet

Transcript

  1. ·΋ͳ͘΍ͬͯ͘Δ Vue.js 3 PWA night conference 2020 2020.02.01 @kazupon

  2. ࣗݾ঺հ

  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
  4. ͸͡Ίʹ

  5. 2016೥10݄

  6. Vue.js 2.0 ϦϦʔε https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering?slide=10

  7. ͦΕ͔Β 3೥༨ΓΛྺͯ

  8. 2020೥ Q1

  9. Vue.js 3.0 ϦϦʔε༧ఆ

  10. ݱࡏ

  11. RFCͰ࠷ऴ࢓༷ΛݻΊͭͭணʑͱ։ൃத https://github.com/vuejs/rfcs

  12. vue-next-webpack-preview https://github.com/vuejs/vue-next-webpack-preview

  13. vue-cli-plugin-vue-next https://github.com/vuejs/vue-cli-plugin-vue-next

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

    Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
  15. ϝδϟʔϦϦʔεͳͷͰ ৽ػೳ & มߋ ͨ͘͞Μ͋Γ·͢

  16. ࠓ೔࿩͢͜ͱ

  17. ࠓ೔࿩͢͜ͱ • Vue.js 3 ͰೖΔ৽ػೳʹ͍ͭͯ • ίϯϙδγϣϯ API • ϑϥάϝϯτ

    • ϙʔλϧ • αεϖϯε
  18. ࠓ೔࿩͢͜ͱ • ਺͋Δ Vue.js 2.x ͔Βͷมߋͷத͔Β͸… • ୯ҰϑΝΠϧίϯϙʔωϯτ • εϩοτ

    • ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI
  19. ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ •

    Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ
  20. ⚠ ஫ҙࣄ߲ ⚠ • ࠓ೔࿩͢಺༰͸ɺൃද࣌఺Ͱ Vue.js ຊମʹ࣮૷͞Ε͍ͯΔ΋ͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta

    όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰ͸มΘΔՄೳੑ͸͋Γ
  21. ৽ػೳ ʹ͍ͭͯ

  22. ίϯϙδγϣϯAPI Composition API

  23. ίϯϙδγϣϯAPIͱ͸ʁ • ؔ਺ϕʔεͰఏڙ͞ΕΔ API ܊ https://vue-composition-api-rfc.netlify.com/api.html ఏڙ͞ΕΔ API ͨͪ

  24. ੜ·Εͨഎܠ • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ •

    ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
  25. ίϯϙδγϣϯAPIΛ࢖͏͜ͱͰ… • ίϯϙʔωϯτ ͷϩδοΫΛࣗ ༝౓ߴ͘૊Έ߹ Θ࣮ͤ૷͢Δ͜ ͱ͕Ͱ͖Δ

  26. େن໛։ൃ͕ΑΓշదʹʂ • ίϯϙʔωϯτ ͷϩδοΫߏ੒ ͕៉ྷʹͳΓɺ ςετ΋͠΍͢ ͘ͳΔʂ

  27. ͲΜͳ΋ͷ͔ ݟ͍͖ͯ·͠ΐ͏ʂ

  28. ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ಺༰Λఏڙ͢Δ΋ͷʹ෼ྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ •

    ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷ஫ೖ)
  29. ϦΞΫςΟϒ ঢ়ଶͷૢ࡞

  30. ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly •

    ref • isRef • toRefs
  31. ৽͍֓͠೦ Ref ͕ಋೖ͞ΕΔ • ϦΞΫςΟϒͳঢ়ଶΛϥοϓͨ͠ࢀরΦ ϒδΣΫτ https://vue-composition-api-rfc.netlify.com/ ʹܝࡌ͞Ε͍ͯΔਤΑΓ

  32. ίʔυྫ

  33. ίϯϙʔωϯτ ͷ ৽ΤϯτϦϙΠϯτ

  34. setup • ίϯϙδγϣϯ APIΛ࢖ͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮૷ • return ͨ͠΋ͷ ͕ςϯϓϨʔτ

    ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ
  35. render ؔ਺ / JSX ΋࢖༻Ͱ͖Δ

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

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

  38. this ͸ίϯϙʔωϯτͷΠϯελϯεͰ͸ͳ͍ • ίϯϙδγϣϯ API Ͱ setup Ͱίϯϙʔ ωϯτΛ࣮૷͢Δ৔߹͸ɺthis ͸΋͏࢖

    Θͳ͍
  39. ϥΠϑαΠΫϧ ϑοΫ

  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 Ҏ߱)
  41. ৽͍͠ϥΠϑαΠΫϧϑοΫͷ࢖༻ྫ

  42. σόοά޲͚ʹ৽ϑοΫ • ϨϯμϦϯάॲཧʹରͯ͠ҎԼͷϑοΫ͕ ఏڙ͞ΕΔ • onRenderTracked • onRenderTriggered

  43. DI (Dependency Injection)

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

    Vue 3.0 Ͱ΋ಉ͡Α͏ ʹར༻Ͱ͖Δ
  45. ϦΞΫςΟϒͳঢ়ଶ΋ڞ༗Ͱ͖Δ • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ ΫτΛ౉͢͜ͱͰڞ༗Ͱ͖Δ

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

    Λ࢖ͬͨύλʔϯΛਪ঑ • Vue 2.x ·Ͱͷ໰୊఺ • $xxx Ͱґଘ͕஫ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ೉͍͠ • ϓϥάΠϯͰ࣮૷͞Εͨίϯϙʔωϯτ͸ɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍
  47. DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ

    DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ (͝ར༻͸ܭըతʹ)
  48. طଘ API ͱͷ ซ༻ʹ͍ͭͯ

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

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

  51. ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘౗ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷ΋ͷ͔ɺͦΕͱ΋ ref

    Ͱϥοϓ͞Εͯ΋ͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹม਺ͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ
  52. ஫ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ΍͍͢ • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮૷&ߏ ੒ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ ͍͍ͯ͘

  53. eslint-plugin-vue ͰϧʔϧΛఏڙ͢Δ • ΧΦεʹͳΒͳ͍ͨΊʹίϯϙδγϣϯ API ޲͚ͷϧʔϧΛఏڙ͢Δ༧ఆ https://github.com/vuejs/eslint-plugin-vue/issues/1035

  54. ϑϥάϝϯτ Fragments

  55. ϑϥάϝϯτͱ͸ • ίϯϙʔωϯτ͕ෳ਺ͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘΋ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ •

    Vue 3.0 Ҏ߱͸σϑΥϧ τͰαϙʔτ fragment fragment fragment
  56. Root ཁૉͰϥοϓ͢Δ໰୊఺ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ

    HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
  57. ໰୊఺ͷίʔυྫ ෆਖ਼ͳ HTML … ϨϯμϦϯά

  58. ϑϥάϝϯτΛར༻͢Δͱ… ϨϯμϦϯά ਖ਼͍͠HTML!

  59. ༨ஊ: Vue 2.x Ͱ͸ؔ਺ܕίϯϙʔωϯτͰճආͰ͖ͨ

  60. ϙʔλϧ Portals

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

    ͱ͸ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰ஫ҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
  62. Ϣʔεέʔε • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹
 z-indexɺposition: absolute ۦ࢖ͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ •

    ϖʔδ্ͷ΢ΟδΣοτ
 ֎෦ͷԿΒ͔ͷ΢ΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δ΋ͷ
  63. Vue 2.x ͰϙʔλϧΛ࢖༻͢Δʹ͸ ... • ϓϥάΠϯ vue-portal Λ࢖͏ඞཁ͕͋ͬͨ
 
 


    
 https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱Ͱ͸ɺԾ૝ DOM ϨϕϧͰϙʔ λϧ͕࣮૷͞Ε͍ͯΔ
  64. ࢖͍ํ • ର৅ͱͳΔίϯςϯπΛ Portal ίϯϙʔ ωϯτͰϥοϓ • target ϓϩύςΟͰର৅ઌͷཁૉΛࢦఆ ͢Δ͚ͩ

  65. ࢖͍ํ: ίʔυྫ

  66. target ϓϩύςΟ

  67. Portal ͱ͍͏໊લมΘΔ͔΋… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ࢓༷٧ΊΔͨΊɺݱࡏ RFC

    Ͱٞ࿦ த https://github.com/vuejs/rfcs/pull/112
  68. αεϖϯε Suspense

  69. αεϖϯεͱ͸ • ࡶʹ͍͏ͱɺίϯϙʔωϯτͷඇಉظͳ ඳըॲཧΛ͍͍ײ͡ʹ΍ͬͯ͘ΕΔ࢓૊ Έ

  70. Ϣʔεέʔε • ྫ: Spinner Λ࢖ͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳ਺Ͱͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ

    ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը
  71. ࢖͍ํ

  72. ࢖͍ํ

  73. ͪͳΈʹ ૉ๿ʹ࣮૷͢Δͱ

  74. None
  75. DEMO ଟஈඇಉظίϯςϯπͷಡΈࠐΈ

  76. αεϖϯε࢖͑Δʁ • alpha ൛Ͱ͸ೖ͍ͬͯΔ͕ɺϏϧυΦϓ γϣϯͰػೳ on/off Ͱ͖ΔΑ͏ʹͳͬͯ ͍Δ • αʔόʔαΠυϨϯμϦϯάͷ࣮૷ঢ়گ

    ࣍ୈ
  77. Vue 2.x ͔Βͷ มߋʹ͍ͭͯ

  78. ୯ҰϑΝΠϧίϯϙʔωϯτ Single File Components

  79. είʔϓ෇͖ CSS ͷ࢓༷มߋ • ݱࡏ RFC Ͱ࠷ऴϑΟʔυόοΫड෇த https://github.com/vuejs/rfcs/pull/119

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

    طଘͷه๏͸ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠͸ ޓ׵ੑΛαϙʔτ ༧ఆ
  81. ::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector)
 Scoped ͞Εͨࢠίϯϙʔωϯτʹ΋ελ ΠϧΛద༻͍ͨ͠৔߹ʹ࢖༻ •

    >>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(஫:Χοί ͕ແ͍ํ)͸ഇࢭ
  82. ::v-deep() ίʔυྫ @vue/sfc-compiler + bundler

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

    πʹ͸໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
  84. ::v-slotted() ίʔυྫ @vue/sfc-compiler + bundler

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

    ίϯϙʔωϯτ಺ʹ <style scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠
  86. ::v-global() ίʔυྫ @vue/sfc-compiler + bundler

  87. εϩοτ Slots

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

    ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε ϩοτ
  89. ϑΟϧλ Filters

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

    Ͱ࡟আ͞ΕΔ
 
 
 • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػ ೳ͸αϙʔτ͞ΕΔ(༧ఆ)
  91. ୅ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ ม׵ͯ͠࢖͏

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

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

    • $on • $off • $once • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸ αϙʔτ͞ΕΔ(༧ఆ)
  94. ୅ସखஈ • mitt Λ࢖͏
 https://github.com/developit/mitt

  95. άϩʔόϧ API Global API

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

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

    createApp ͰΠϯελϯεΛੜ੒
  98. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    productionTip ͸ Vue 3.0 Ͱ͸࡟আ
  99. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    ͜ͷล͸ ΄΅ͦͷ··
  100. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

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

    ΤϯτϦϙΠϯτϨϕϧͷ provide ΋ఏڙ͢Δ
  102. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    DOM ΁ͷ Ϛ΢ϯτํ๏͸ಉ͡
  103. ·ͱΊ

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

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

  106. Vue Fes Japan 2020 • ࠓ೥ 2020 ೥΋΍Γ·͢ʂ • 11݄։࠵ʹ޲͚ͯ׆ಈ։࢝ʂ

  107. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ