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

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

kazupon
February 01, 2020

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

kazupon

February 01, 2020
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

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

    View Slide

  2. ࣗݾ঺հ

    View Slide

  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

    View Slide

  4. ͸͡Ίʹ

    View Slide

  5. 2016೥10݄

    View Slide

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

    View Slide

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

    View Slide

  8. 2020೥ Q1

    View Slide

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

    View Slide

  10. ݱࡏ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. ެࣜϓϥάΠϯ/πʔϧ܊͸ରԠத
    • Vue Router
    • Vuex
    • Vue DevTools
    • Vue Test Utils
    • Vetur
    • Vue CLI
    • Webpack plugin
    • ESLint Plugin
    • JSX Plugin
    • … etc

    View Slide

  15. ϝδϟʔϦϦʔεͳͷͰ
    ৽ػೳ & มߋ
    ͨ͘͞Μ͋Γ·͢

    View Slide

  16. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

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

    View Slide

  19. ࠓ೔࿩͞ͳ͍͜ͱ
    • Vue.js ຊମҎ֎ͷ͜ͱ
    • Vue ެࣜϓϥάΠϯ / πʔϧܥ
    • Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ

    View Slide

  20. ⚠ ஫ҙࣄ߲ ⚠
    • ࠓ೔࿩͢಺༰͸ɺൃද࣌఺Ͱ
    Vue.js ຊମʹ࣮૷͞Ε͍ͯΔ΋ͷ
    • RFC ͷঢ়گͱࠓޙͷalphaɺbeta
    όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍
    ୈͰ͸มΘΔՄೳੑ͸͋Γ

    View Slide

  21. ৽ػೳ
    ʹ͍ͭͯ

    View Slide

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

    View Slide

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

    View Slide

  24. ੜ·Εͨഎܠ
    • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ
    • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ
    ͘͘ͳΔ
    • ςετ͕͠ʹ͍͘
    • ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘
    • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘

    View Slide

  25. ίϯϙδγϣϯAPIΛ࢖͏͜ͱͰ…
    • ίϯϙʔωϯτ
    ͷϩδοΫΛࣗ
    ༝౓ߴ͘૊Έ߹
    Θ࣮ͤ૷͢Δ͜
    ͱ͕Ͱ͖Δ

    View Slide

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

    View Slide

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

    View Slide

  28. ఏڙ͞ΕΔओͳ API ͷछྨ
    • ओʹҎԼͷ಺༰Λఏڙ͢Δ΋ͷʹ෼ྨ͞ΕΔ
    • ϦΞΫςΟϒঢ়ଶͷૢ࡞
    • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ
    • ϥΠϑαΠΫϧϑοΫ
    • DI (Dependency injection: ґଘੑͷ஫ೖ)

    View Slide

  29. ϦΞΫςΟϒ
    ঢ়ଶͷૢ࡞

    View Slide

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

    View Slide

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

    View Slide

  32. ίʔυྫ

    View Slide

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

    View Slide

  34. setup
    • ίϯϙδγϣϯ
    APIΛ࢖ͬͯί
    ϯϙʔωϯτͷ
    ϩδοΫΛ࣮૷
    • return ͨ͠΋ͷ
    ͕ςϯϓϨʔτ
    ͷϨϯμϦϯά
    ίϯςΩετʹ
    ͳΔ
    ৽͍͠
    ΤϯτϦϙΠϯτ

    View Slide

  35. render ؔ਺ / JSX ΋࢖༻Ͱ͖Δ

    View Slide

  36. Ҿ਺ʹ props ͱ context ͕౉͞ΕΔ
    • props: 

    ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ
    • context: 

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

    View Slide

  37. props ͱ context ͷ࢖༻ྫ

    View Slide

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

    View Slide

  39. ϥΠϑαΠΫϧ
    ϑοΫ

    View Slide

  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 Ҏ߱)

    View Slide

  41. ৽͍͠ϥΠϑαΠΫϧϑοΫͷ࢖༻ྫ

    View Slide

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

    View Slide

  43. DI
    (Dependency Injection)

    View Slide

  44. provide / inject
    • Vue 2.x Ͱ΋ఏ
    ڙ͞Ε͍ͯͨ
    DI Λ Vue 3.0
    Ͱ΋ಉ͡Α͏
    ʹར༻Ͱ͖Δ

    View Slide

  45. ϦΞΫςΟϒͳঢ়ଶ΋ڞ༗Ͱ͖Δ
    • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ
    ΫτΛ౉͢͜ͱͰڞ༗Ͱ͖Δ

    View Slide

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

    View Slide

  47. DI ͷԠ༻ྫ
    • ಠࣗ Store
    ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ
    (͝ར༻͸ܭըతʹ)

    View Slide

  48. طଘ API ͱͷ
    ซ༻ʹ͍ͭͯ

    View Slide

  49. ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ
    • ซ༻ͨ͠৔߹ͷίϯϙδγϣϯ API ͷڍಈ
    • Vue 2.x ͷΦϓγϣϯ API ͷલʹղܾ͞Ε
    Δ
    • ͳͷͰɺsetup ಺Ͱ this.xxx ͸ෆՄ
    • Φϓγϣϯ API ଆ͔Β͸ ίϯϙδγϣϯ API
    Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ

    View Slide

  50. ίϯϙδγϣϯ API
    σϝϦοτ

    View Slide

  51. ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘౗ʹ
    • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ
    ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢
    • σʔλ͕ reactive ͳͷ΋ͷ͔ɺͦΕͱ΋
    ref Ͱϥοϓ͞Εͯ΋ͷ͔Ͳ͏͔ҙ͕ࣝඞཁ
    • ͦͷͨΊʹม਺ͷ໋໊نଇ͕ඞཁʹͳΔՄ
    ೳੑ͕͋Δ

    View Slide

  52. ஫ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ΍͍͢
    • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮૷&ߏ
    ੒ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ
    ͍͍ͯ͘

    View Slide

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

    View Slide

  54. ϑϥάϝϯτ
    Fragments

    View Slide

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

    View Slide

  56. Root ཁૉͰϥοϓ͢Δ໰୊఺
    • Invalid ͳ HTML ʹͳͬͯ͠·͏
    • Semantic ͳ HTML ʹͳΒͳ͍
    • a11yରԠ͕Ͱ͖ͳ͘ͳΔ
    • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏

    View Slide

  57. ໰୊఺ͷίʔυྫ
    ෆਖ਼ͳ HTML …
    ϨϯμϦϯά

    View Slide

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

    View Slide

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

    View Slide

  60. ϙʔλϧ
    Portals

    View Slide

  61. ϙʔλϧͱ͸
    • ίϯϙʔωϯτ಺ͷ͋
    ΔίϯςϯπΛVueͷ
    ඳըର৅֎ͷཁૉʹඳ
    ը͢ΔͨΊͷ࢓૊Έ
    • WICG ͷ Portals ͱ͸
    ࣅ͍ͯΔ͕ͪΐͬͱҧ
    ͏ͷͰ஫ҙ

    λʔήοτʹඳը
    Webϖʔδ

    View Slide

  62. Ϣʔεέʔε
    • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹

    z-indexɺposition: absolute ۦ࢖ͨ͠ελ
    Πϧॲཧ͔Β։์͞ΕΔ
    • ϖʔδ্ͷ΢ΟδΣοτ

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

    View Slide

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




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

    View Slide

  64. ࢖͍ํ
    • ର৅ͱͳΔίϯςϯπΛ Portal ίϯϙʔ
    ωϯτͰϥοϓ
    • target ϓϩύςΟͰର৅ઌͷཁૉΛࢦఆ
    ͢Δ͚ͩ

    View Slide

  65. ࢖͍ํ: ίʔυྫ

    View Slide

  66. target ϓϩύςΟ

    View Slide

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

    https://github.com/vuejs/rfcs/pull/112

    View Slide

  68. αεϖϯε
    Suspense

    View Slide

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

    View Slide

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

    View Slide

  71. ࢖͍ํ

    View Slide

  72. ࢖͍ํ

    View Slide

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

    View Slide

  74. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  80. Vue 3.0 Ҏ߱ͷ৽࢓༷
    • Vue ಠࣗ CSS ֦ு
    ٙࣅΫϥεΛఏڙ
    • طଘͷه๏͸ίϯ
    ύΠϥͰܯࠂ͢Δ
    ͕ɺಈ࡞ͱͯ͠͸
    ޓ׵ੑΛαϙʔτ
    ༧ఆ

    View Slide

  81. ::v-deep() ٖࣅΫϥε
    • σΟʔϓηϨΫλ (Deep Selector)

    Scoped ͞Εͨࢠίϯϙʔωϯτʹ΋ελ
    ΠϧΛద༻͍ͨ͠৔߹ʹ࢖༻
    • >>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(஫:Χοί
    ͕ແ͍ํ)͸ഇࢭ

    View Slide

  82. ::v-deep() ίʔυྫ
    @vue/sfc-compiler + bundler

    View Slide

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

    Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ
    ίϯςϯπʹରͯ͠ελΠϧͷ
    ద༻͕ඞཁ

    View Slide

  84. ::v-slotted() ίʔυྫ
    @vue/sfc-compiler + bundler

    View Slide

  85. ::v-global() ٖࣅΫϥε
    • άϩʔόϧͳελΠϧΛ <br/>಺ͰఆٛͰ͖Δ<br/>• ैདྷ͸ SFC ίϯϙʔωϯτ಺ʹ <style<br/>scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠<br/>

    View Slide

  86. ::v-global() ίʔυྫ
    @vue/sfc-compiler + bundler

    View Slide

  87. εϩοτ
    Slots

    View Slide

  88. Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ
    • ैདྷͷҎԼʹΑΔεϩοτػೳ͸࡟আ͞
    ΕΔ
    • slot ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ
    • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε
    ϩοτ

    View Slide

  89. ϑΟϧλ
    Filters

    View Slide

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



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

    View Slide

  91. ୅ସखஈ
    • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ
    ม׵ͯ͠࢖͏
    • Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ
    Parse & Transform ͯ͠࢖͏
    • @vue/compiler-core Ͱੜ੒͞Εͨ render ؔ
    ਺ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠
    ͯ࢖͏

    View Slide

  92. Πϕϯτ
    Events

    View Slide

  93. Event Emitter ܥ API ͷ࡟আ
    • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ
    ͷ API ͸࡟আ͞ΕΔ༧ఆ
    • $on
    • $off
    • $once
    • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸
    αϙʔτ͞ΕΔ(༧ఆ)

    View Slide

  94. ୅ସखஈ
    • mitt Λ࢖͏

    https://github.com/developit/mitt

    View Slide

  95. άϩʔόϧ API
    Global API

    View Slide

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

    ঢ়ଶͷϦηοτ΋͘͠͸ϦηοτͰ͖ͳ͍

    (Vue.config.errorHandlerɺVue.useɺVue.mixin)
    • ಉ͡ϖʔδ্Ͱෳ਺ͷ Vue ΠϯελϯεؒͰঢ়ଶΛ੔
    ߹ͤ͞Δͷ͕೉͍͠
    • ·ͨɺTreeShaking ࠷దԽͷૂ͍΋͋Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  100. Vue 2.x ͱ Vue 3.0 ͷҧ͍
    Vue 2.x Vue 3.0
    Vue 3.0 Ͱ͸໊લΛมߋ 

    (ओͳ༻్͸ TS Ͱ
    ܕ෇͚Λαϙʔτ͢ΔͨΊ)

    View Slide

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

    View Slide

  102. Vue 2.x ͱ Vue 3.0 ͷҧ͍
    Vue 2.x Vue 3.0
    DOM ΁ͷ
    Ϛ΢ϯτํ๏͸ಉ͡

    View Slide

  103. ·ͱΊ

    View Slide

  104. • ίϯϙδγϣϯ API ʹΑΓେن໛։ൃ͕Α͘
    ͳΓ·͢
    • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮
    ૷ͷදݱྗ͕ߴ·Γ·͢
    • Vue 2.x ͔Βͷ breaking change తͳมߋ΋͋
    ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏

    (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ)
    ·ͱΊ

    View Slide

  105. ࠷ޙʹ

    View Slide

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

    View Slide

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

    View Slide