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

38bee248082f6071230de65e9d74a944?s=47 kazupon
February 01, 2020
Programming
36
13k

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

February 01, 2020
Tweet

More Decks by kazupon

See All by kazupon
38bee248082f6071230de65e9d74a944?s=48 kazupon
14
3.9k
38bee248082f6071230de65e9d74a944?s=48 kazupon
3
480
38bee248082f6071230de65e9d74a944?s=48 kazupon
18
5.3k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
740
38bee248082f6071230de65e9d74a944?s=48 kazupon
4
1.5k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
500
38bee248082f6071230de65e9d74a944?s=48 kazupon
15
5.1k
38bee248082f6071230de65e9d74a944?s=48 kazupon
2
400
38bee248082f6071230de65e9d74a944?s=48 kazupon
1
7.4k

Other Decks in Programming

See All in Programming
Cc696ce673253d3bd21b3aa9e7927f39?s=48 hitode909
0
880
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
2
400
C5f6e8dffbb19acf405198c8fb917337?s=48 mp911de
1
130
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
1
250
94138d52371ef2791611f01dd41764f4?s=48 joekarlsson
0
130
1a1d418bdf51cbf8fce1317f6c80a907?s=48 satoshi0212
4
240
A3fa7c92c26f1170762202d574c19e20?s=48 soh335
6
950
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
220
55517518e318b28906211d115c24208b?s=48 clyang
0
560
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
1
120
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
4
670
127622866eaa739e06f9507aff67be2f?s=48 planeta
0
140

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
13
2.3k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
100
5.7k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
51
3.9k
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9.1k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
266
16k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.5k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
870

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ