Vue 3.4

Transcript

1. Vue.js 3.4 v-tokyo#19 2024.03.06 @kazupon
2. ࣗݾ঺հ
3. PLAID, inc. 
 Vue.js Core Team Member Nuxt Community team Vue.js Japan User Group Organizer Creator of Vue I18n & Intlify Maintainer of Nuxt I18n @kazu_pon kazupon kazupon
4. ͸͡Ίʹ
5. 2023೥຤ Vue 3.4 ϦϦʔεʂ https://blog.vuejs.org/posts/vue-3-4
6. ࠓ೔࿩͢͜ͱ • Vue 3.4 ͰϦϦʔε͞Εͨ಺༰ʹ͍ͭͯ • ϚΠφʔΞοϓσʔτʹ΋ؔΘΒͣɺϦΞΫςΟϒ γεςϜ΍ίϯύΠϥपΓ͕େ͖͘Ξοϓσʔτ͞ Ε͍ͯΔͷͰɺͦͷลΓ͸಺༰͸ৄ͠Ίʹ
7. 3.4 ϦϦʔε಺༰
8. ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • de fi neModel ͷ҆ఆԽ • ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ
9. ഇࢭػೳ • άϩʔόϧ JSX ໊લۭؒ • Reactivity Transform • app.con fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
10. ͦΕͰ͸ ݟ͍͖ͯ·͠ΐ͏ʂ 👉
11. ػೳͱվળ ✨📈
12. v-bind লུه๏ͷαϙʔτ
13. • ม਺໊͕όΠϯυઌͷଐੑ·ͨ͸ props ໊ͱಉ͡ͳ Β͹লུͰ͖ΔΑ͏ʹͳͬͨ ಉ໊ͷলུه๏ Before After
14. • v-bind ͷಉ໊লུه๏͸ JavaScript ͷΦϒδΣΫτ ॳظԽ͢Δࡍͷলུه๏ͱಉ͡ JavaScript ͱࣅͨߏจ Vue v-bind JavaScript ม਺ͷΈΛࢦఆ͢Δলུ ه๏͸ࣅ͍ͯΔ
15. de fi neModelͷ҆ఆԽ
16. de fi neModel • <script setup> Ͱ v-model ͰόΠϯυ͢Δ props Λ ఆٛͰ͖Δ syntax sugar ͷΑ͏ͳϚΫϩ • 3.3 Ͱ࣮ݧతػೳͱͯ͠ϦϦʔε͞Εɺ3.4 Ͱ੖Εͯ ਖ਼ࣜػೳʹͳͬͨ https://ja.vuejs.org/api/sfc-script-setup#de fi nemodel
17. de fi neModel Λ࢖Θͳ͍৔߹͸… • de fi neProps ɺde fi neEmits Λ࢖ͬͯఆٛͯ͠ɺ͞Β ʹ஋ͷಉظΛͱΔͨΊͷίʔυΛॻ͔ͳ͚Ε͹ͳΒ ͳ͔ͬͨ
18. ϋΠυϨʔγϣϯ पΓͷվળ
19. 3.4 ҎલͰ͸෼͔ΓͮΒ͔ͬͨ
20. 3.4 Ҏ߱Ͱ͸վળʂ • ΫϥΠΞϯτͱαʔόʔͷϨϯμϦϯάͷࠩҟΛ ϝοηʔδ & DOM ϋΠϥΠτͰ֬ೝՄೳʹͳͬͨ classɺstyle ɺಈతόΠϯυͨ͠ଐੑ΋νΣοΫͯ͘͠ΕΔ
21. production ޲͚ʹίϯύΠϥλΠϜϑϥάΛ௥Ճ • __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ʹΑΓɺproduction ؀ڥͰ΋֬ೝͰ͖ΔΑ͏ʹͳͬ ͨ σόοά࣌ʹͷΈ࢖༻͠·͠ΐ͏ʂ ϋΠυϨʔγϣϯपΓͷϩδοΫ͕όϯυϧ͞ΕΔͷͰ
22. Τϥʔίʔυͱ ίϯύΠϧλΠϜϑϥάͷ ϦϑΝϨϯεαϙʔτ
23. production ؀ڥͰ͸Τϥʔ৘ใΛ࡟আͯ͠͠·͏ • development ؀ڥͰ͸ɺΤϥʔղফͷͨΊʹ৘ใΛ ఏڙ͢Δ͕ɺόϯυϧαΠζ࡟ݮͷͨΊɺ production Ϗϧυ࣌͸ͦΕΒΛ࡟আ͢Δ Development Production Τϥʔ৘ใ͕ Τϥʔίʔυʹ ஔ͖׵ΘΔ ΤϥʔίʔυΛݩʹ Vue ͷιʔείʔυ͔Βղಡ͕ඞཁ…
24. 3.4 Ҏ߱Ͱ͸ • ΤϥʔίʔυͷϦϑΝϨϯεΛࢀরͰ͖Δ URL ͕ ग़ྗ͞ΕΔΑ͏ʹͳΔ Development Production URL ΛΫϦοΫͯ͠ϦϯϑΝϨϯεͱͯ͠ܝࡌ͞Ε͍ͯΔ ՕॴͰৄࡉ৘ใΛ֬ೝͰ͖Δ
25. 3.4 Ͱ௥Ճ͞ΕͨϦϑΝϨϯεϖʔδ • ެࣜυΩϡϝϯτʹ௥ Ճ͞Εͨ • ϥϯλΠϜͱίϯύΠ ϥͷΤϥʔίʔυͱ ϝοηʔδ͕ҰཡͰఏ ڙ͞Ε͍ͯΔ https://vuejs.org/error-reference/
26. ίϯύΠϧλΠϜϑϥά΋αϙʔτ • Vite ͳͲͷόϯυϥͰࢦఆ͢ΔίϯύΠϧλΠϜϑϥ άͷ৘ใ΋ެࣜυΩϡϝϯτͰ৘ใఏڙΛαϙʔτ https://ja.vuejs.org/api/compile-time- fl ags
27. ίϯύΠϥ ύϑΥʔϚϯεͷվળ
28. 3.4 Ͱ͸ίϯύΠϧ͕શମతʹ 44% ଎͘ͳ͍ͬͯΔ • Elk Λ࢖ͬͨϕϯνϚʔ Ϋ݁Ռ 
 https://github.com/elk-zone/elk • ܭଌ಺༰: 
 SFC ղੳ ʙ JS ίʔυ & ιʔεϚοϓੜ੒·ͰΛ ܭଌ https://github.com/vuejs/core/pull/9674
29. Ͳ͏΍ͬͯ଎ͨ͘͠ͷ͔ 🏎💨
30. ύʔαʔΛ2ഒߴ଎Խͨ͠ • ύʔαʔ͸ϑϧεΫϥον͔Βॻ͖௚͠ • 3.4 Ҏલ 
 ࠶ؼԼ߱ߏจղੳ (Recursive Descent Parsing) + ਖ਼نදݱ • 3.4 Ҏ߱ 
 htmlparser2 ͔ΒϑΥʔΫͨ͠༗ݶΦʔτϚτϯΛ ࢖ͬͨτʔΫφΠβʔ ςϯϓϨʔτจࣈྻεΩϟϯΛઌಡΈͱ࠷খݶͷόοΫτ ϥοΫʹΑΓ1ԟ෮ͰॲཧͰ͖ΔΑ͏ʹͨ͠ https://github.com/vuejs/core/blob/main/packages/compiler-core/src/tokenizer.ts
31. ίʔυੜ੒΋40%ۙ͘଎ͨ͘͠ • ιʔεϚοϓͰඞཁʹͳΔҐஔ৘ใ (colum / row) ͷܭࢉΛ࠷దԽ • Vue ίϯύΠϥ͸ίʔυੜ੒(CodeGen)Ͱ͸ SFC ςϯϓϨʔτจ ࣈྻ͔ΒύʔαʔʹΑͬͯੜ੒͞Εͨ AST Λղੳͯ͠ɺAST ͷ֤ Node ͝ͱʹ JS ίʔυͷஅยతͳจࣈྻΛ഑ྻʹ push ͍ͯ͠Δ • ͦͷ࣌ʹɺιʔεϚοϓ΋ੜ੒ॲཧ΋ߦ͓ͬͯΓɺੜ੒͞ΕΔJS ίʔυଆ͔ΒSFC ςϯϓϨʔτଆͷҐஔΛಛఆͰ͖ΔΑ͏Ґஔ৘ ใ Λܭࢉͯ͠Ϛοϐϯά͍ͯ͠Δ • ͦͷϚοϐϯάܭࢉॲཧͰ͸ɺ഑ྻʹ஝ੵ͞Εͨஅยతͳ JS ίʔυͷจࣈྻ෼ɺfor จΛ࣮ߦͯ͠Ґஔ৘ใΛܭࢉ͍ͯ͠Δ
32. ίʔυੜ੒΋40%ۙ͘଎ͨ͘͠ • ιʔεϚοϓੜ੒͢ΔͨΊʹඞཁͳॲཧίετͷ࠷దԽ • Vue ίϯύΠϥͰ͸ɺιʔεϚοϓੜ੒ʹ source-map-js ͱ͍͏ύοέʔδΛ࢖͍ͬͯΔ • SourceMapGenerator.prototype.addMapping ಺Ͱ͸ɺҾ਺ ͷνΣοΫ΍ϚοϐϯάͷόϦσʔγϣϯΛ࣮ߦ͍ͯ͠Δ • ͦΕΒ͸ Vue ίϯύΠϥʹͱͬͯΦʔόʔϔουͳͷͰɺ addMapping Λݺ͹ͣʹ಺෦APIΛݺͼग़͢͜ͱͰճආ
33. • VueίϯύΠϥ͸ SFC ʹରͯ͠ύʔεΛ2ճ࣮ߦ͍ͯ͠ Δ • 1ճ໨: SFC ຊମ 
 SFC ͷ templateɺscriptɺstyle ͳͲΛநग़ • 2ճ໨: SFC ςϯϓϨʔτ 
 ࠷ॳͷύʔεͰநग़͞Εͨ SFCϒϩοΫ template Λ ύʔε͢Δ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠
34. • 2 ճ໨ͷ SFCςϯϓϨʔτͷύʔεͰੜ੒͞ΕΔιʔεϚο ϓͷҐஔ৘ใ͸ɺ1ճ໨ͷ SFC ϒϩοΫԽͰੜ੒͞Εͨ ιʔεϚοϓͷҐஔ৘ใ͔ΒΦϑηοτʹͳ͍ͬͯͳ͍… • ͭ·ΓɺSFCςϯϓϨʔτ͕ JS ίʔυʹίϯύΠϧ͞ΕΔ ࡍʹɺ1ճ໨Ͱੜ੒͞ΕͨιʔεϚοϓ৘ใΛݩʹɺSFC ς ϯϓϨʔτͷιʔεϚοϓͷҐஔ৘ใΛܭࢉͯ͠Ϛοϐϯ άͤ͞ͳ͚Ε͹ͳΒͳ͍ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠ ύʔεͰੜ੒͞Εͨ AST ΛݩʹιʔεϚοϓΛϚοϐϯά ͢Δͷ͸ඇৗʹߴίετʂ
35. • 3.4 Ͱॻ͖௚͞ΕͨύʔαʔʹɺparseMode Λ௥Ճ 
 
 
 
 
 
 
 
 
 • parseMode ʹΑͬͯύʔαʔ͸ɺSFC ςϯϓϨʔτͷύʔεͰ ΋1ճ໨ͷύʔεͰࣄલॲཧ͞Εͨ AST Λ2ճ໨ͷύʔεͰ΋࠶ ར༻͠ɺιʔεϚοϓͷϚοϐϯάॲཧ΋ճආ͢Δ͜ͱͰޮ཰త ʹॲཧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠
36. ϦΞΫςΟϒγεςϜ ͷվળ
37. • Case1: 
 computed ͷ஋͕มΘΒͳ͍ͷʹɺͦΕʹґଘ͢Δ computed ͕࣮ߦ͞Εͯ͠·ͬͨΓɺwatch / watchEffect ͷίʔϧόοΫ΍ɺrender ͕τϦΨʔ͞Εͯ ͠·͏ • Case2: 
 ͋ΔϦΞΫςΟϒͳ஋Λෳ਺ computed ʹ͍ͯ͠Δͱ͖ ʹɺϦΞΫςΟϒ஋͕มΘͬͨͱ͖ʹɺwatch / watchEffect ͷίʔϧόοΫ͕ෳ਺ճτϦΨʔ͞Εͯ͠· ͏ 3.4 Ͱ͸ computed पΓͷ༷ʑͳ໰୊ͳղܾ͞Ε͍ͯΔ
38. • Case3: 
 ϦΞΫςΟϒͳ഑ྻͷ shiftɺunshiftɺsplice Ͱ഑ྻͷ ಺༰Λมߋ͢Δͱɺwatch / watchEffect ͷίʔϧόο Ϋ͕ෳ਺ճτϦΨʔ͞Εͯ͠·͏ 3.4 Ͱ͸ computed पΓͷ༷ʑͳ໰୊ͳղܾ͞Ε͍ͯΔ
39. • GitHub Issue 
 https://github.com/vuejs/core/pull/5912 ͜͏ͨ͠໰୊͕ϦΞΫςΟϒվળ PR Ͱશͯमਖ਼͞Εͨ
40. • setInterval Ͱ ref ͳ஋Ͱ͋Δ ms ߋ৽ʹΑͬͯɺsecɺ minɺhour ͷ computed Λߋ৽͢ΔσϞ ͜ͷվળʹΑΓύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
41. Ͳ͏΍ͬͯ ύϑΥʔϚϯεΛվળͨ͠ͷ͔ 🏎💨
42. • 3.4Ҏલ: • deps.length = 0 Ͱొ࿥͞Ε͍ͯΔ dep ܊Λ࡟আ͍ͯͨ͠ • 3.4Ҏ߱: • deps ͷొ࿥ঢ়گΛΧ΢ϯλ _depsLength ʹΑͬͯ؅ཧ • _depsLength ͕Ϧηοτ͞ΕΔͷΈɻdeps ಺ͷݹ͍ dep ͸৽͠ ͍ dep ʹΑ্ͬͯॻ͖͍ͯ͠Δ • ্ॻ͖͖͠Ε͍ͯͳ͍ deps ಺ͷݹ͍ dep ܊͸ɺdeps.length = _depsLength ʹΑͬͯτϦϛϯά͞ΕΔ ෆඞཁͳ GC Λආ͚Δ
43. • DirtyLevels Λಋೖͯ͠ computed ͷ஋͕ԚΕ͍ͯΔ (ߋ৽͞Ε ͍ͯΔ)͔Ͳ͏͔νΣοΫͰ͖ΔΑ͏ʹɺReactiveEffect ʹͦ ͷঢ়ଶΛ࣋ͭΑ͏ʹ͍ͯ͠Δ • ϦΞΫςΟϒͳ஋ͷߋ৽࣌ͷτϦΨʔʹ͓͍ͯɺ ReactiveEffect ΛεέδϡʔϥʔͰ࣮ߦͤ͞ΔͨΊʹɺɹ ΩϡʔΠϯά͢Δ͔Ͳ͏͔ DirtyLevels Ͱ൑ผͰ͖ΔΑ͏ʹ͠ ͍ͯΔ • ͞Βʹ ReactiveEffect ʹɺͦΕࣗମ͕࣮ߦ͞Ε͍ͯΔ͔Ͳ͏ ͔൑ผ͢ΔΧ΢ϯλม਺Λ࣋ͭ͜ͱͰɺແବʹΩϡʔΠϯά ͤ͞ͳ͍Α͏ʹ੍ޚ͍ͯ͠Δ ReactiveEffect ͷ࣮ߦΛޮ཰Խ
44. • ৽͘͠಺෦ API Ͱ͋Δ pauseSchedulingɺ resetScheduling Λ௥Ճ • ͦΕʹΑͬͯɺReactiveEffect ͷ࣮ߦεέδϡʔϦϯ άΛఀࢭͨ͠ΓɺϦηοτͯ͠Γ͢Δ͜ͱͰɺεέ δϡʔϦϯάΛࡉ੍͔͘ޚ͍ͯ͠Δ ͖Ίࡉ΍͔ͳεέδϡʔϦϯάௐ੔
45. ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641
46. • ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳): +118%~185% ͪͳΈʹ 3.4 ϦϦʔεޙ΋վળ͸ଓ͍͍ͯΔ https://github.com/vuejs/core/pull/10397
47. ഇࢭػೳ 🙅⚠
48. άϩʔόϧ JSX ໊લۭؒ
49. 3.4 ͔ΒάϩʔόϧͰ͸ͳ͘ͳͬͨ • React ͕ଘࡏ͢Δ։ൃϓϩδΣΫτʹ͓͍ͯίϯϑϦ Ϋτ͢ΔͨΊɺVue ͱڞଘͰ͖ΔΑ͏࡟আͨ͠ https://github.com/vuejs/core/blob/98793a05a643e07baefef637ab6e7033aedcf8db/packages/vue/jsx.d.ts
50. 3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • tscon fi g ͷ jsxImportSource ʹ ‘vue’ Λઃఆ 

51. 3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • ΋͘͠͸ɺ 
 ϑΝΠϧ͝ͱͷઌ಄ʹ 
 /* @jsxImportSource vue */ 
 
 Λ௥Ճ
52. 3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • طଘͷίʔυʹ JSX.Element ͳͲͷάϩʔόϧͳ JSX ໊લۭؒʹґଘ͢Δ৔߹͸ɺͦͷίʔυʹ “import ‘vue/jsx’ “ Λ௥Ճ͢Δ https://github.com/intlify/vue-i18n-next/pull/1661
53. ͪͳΈʹ ͜Ε͸ഁյతมߋͰ͸ͳ͍ͷʁ 🤔
54. ܕఆٛͷมߋ͸ semver ͷΤοδέʔεʹ౰ͨΔ • Vue ͷόʔδϣχϯά ϙϦγʔ͸ semver ͩ ͕ɺ͍͔ͭ͘ྫ֎͕͋ Δ • ͜ͷέʔε͸ TypeScript ͷܕఆٛͷ Τοδέʔεʹ౰ͨΔ ͷͰഁյతมߋʹ֘౰ ͠ͳ͍ https://ja.vuejs.org/about/releases#semantic-versioning-edge-cases
55. Reactivity Transform
56. • 3.2 Ͱ࣮ݧతػೳͱͯ͠ೖ͕ͬͨ 3.3 Ͱඇਪ঑ΛΞ φ΢ϯε Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform
57. • લճͷ v-tokyo#18 ͷεϥΠυͰ·ͱΊ͍ͯΔͷͰ ؾʹͳΔํ͸ɺͦͪΒΛࢀߟʹʂ ഇࢭ͢Δཧ༝ https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023?slide=27
58. app.con fi g.unwrapInjectedRef
59. app.con fi g.unwrapInjectedRef ͱ͸Կʁ • 3.2 ҎલͰ Composition API Λ࢖ͬͯ Provide / Inject ͨ͠ ࣌ɺςϯϓϨʔτͰ `.value` ͕ͳ͍ͱಈ͔ͳ͍໰୊͕͋ͬͨ • ͦͷղܾҊͱͯ͠ΦϓγϣϯϑϥάͰճආͰ͖ΔҰ࣌తʹ ఏڙ͞ΕͨιϦϡʔγϣϯ https://github.com/vuejs/core/issues/4196
60. • 3.3 Ͱఏڙ͞Εɺ໰୊ ΋मਖ਼͞ΕͨͨΊɺͦ Εͱಉ࣌ʹ deprecated ѻ͍ • ͳͷͰެࣜυΩϡϝϯ τʹ΋ࡌΒͳ͔ͬͨ • ϦϦʔεͷஈ֊Λܦ ͯ 3.4 Ͱ࡟আʹͳͬͨ https://github.com/vuejs/core/commit/561e210157874b216efc1c17be701a6a81c4383b ୹໋ʹऴΘͬͨݬͷΦϓγϣϯ
61. vnode ϓϦϑΟοΫε ʹΑΔ ΠϕϯτϦεφʔ
62. vnode ϓϦϑΟΫεΑΔΠϕϯτϦεφʔͱ͸Կʁ • Vue Ͱ͸ v-on Ͱ Virtual DOM ϨΠϠʔͷϥΠϑ αΠΫϧΠϕϯτΛ Hook Ͱ͖ΔΠϕϯτϋ ϯυϥʔΛ࢖͏͜ͱ͕ Ͱ͖Δ
63. ࠓճมߋର৅ͱͳΔ VNode ϥΠϑαΠΫϧΠϕϯτ • vnode-before-mount • vnode-mounted • vnode-before-update • vnode-updated • vnode-before-unmount • vnode-unmounted runtime-core.d.ts Ͱఆٛ͞Ε͍ͯΔܕఆٛͷHook
64. ϓϨϑΟοΫε͕ `vnode` Ͱ͸ͳ͘ `vue:`ʹมߋ • มߋ͸ 3.3 Ͱ࣮૷͞Ε͓ͯΓɺ࢖ͬͨ৔߹ deprecate ͳܯࠂ͕ग़ྗ͞ΕΔ
65. ϓϨϑΟοΫε͕ `vnode` Ͱ͸ͳ͘ `vue:`ʹมߋ • 3.4 Ͱ࢖ͬͨ৔߹͸ɺΤϥʔ͕ग़ྗ͞ΕͯϏϧυͰ͖ͳ ͍Α͏ʹͳ͍ͬͯΔ
66. v-is σΟϨΫςΟϒ
67. Vue 3 ʹ͓͚Δ v-is σΟϨΫςΟϒ • DOM Ͱఆٛ͞ΕͨςϯϓϨʔτʹ͓͍ͯɺDOM ཁૉΛ Vue ίϯ ϙʔωϯτʹஔ͖׵͍͑ͨ࣌ʹ࢖͏ • is ଐੑ͸ Web Components ͷ࢓༷ʹ४ڌͯ͠ΧελϜཁૉͷ੾Γସ ͑ʹ࢖͏ • v-is ʹࢦఆ͢Δ஋͸ JavaScript จࣈྻϦςϥϧʹ͢Δඞཁ͕͋ͬͨ https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md
68. 3.4 Ҏ߱ v-is ͸׬શʹഇࢭ • 3.3 Ͱ v-is σΟϨΫςΟϒ͔Β ‘vue:’ ϓϨϑΟοΫε෇͖ Ͱ Vue ίϯϙʔωϯτΛ is ଐੑʹ࢖༻͢ΔΑ͏มߋ • is ଐੑʹ౷߹͞Εͨ͜ͱʹΑΓ is ଐੑͱ v-is Λ࢖͍෼͚ Δೝ஌ෛՙ͕ݮͬͨ
69. ·ͱΊ
70. Vue 3.4 • Vue 3.4 ͰϦϦʔε͞Εͨػೳͱվળɺͦͯ͠ഇࢭ ػೳʹ͍ͭͯ࿩ͨ͠ • v-bind লུه๏ɺde fi neModel ਖ਼ࣜαϙʔτ͸Ξϓ Ϧͷ։ൃੜ࢈ੑΛߴΊͯ͘Δ • ϋΠυϨʔγϣϯϛεϚον৘ใͷվળ΍Τϥʔ ίʔυϦϑΝϨϯεͷఏڙ͸ɺσόοάΛॿ͚ͯ͘ ΕΔ
71. Vue 3.4 • ίϯύΠϥύϑΥʔϚϯεͷվળ͸ɺίϯύΠϧ(Ϗ ϧυ)͕࣌ؒ୹ॖ͞ΕΔͨΊɺ։ൃ࣌ͷ։ൃੜ࢈ੑ ΍ɺσϓϩΠͷࡍɺσϓϩΠ࣌ؒΛ୹ॖͤͯ͘͞Ε Δ • ϦΞΫςΟϒγεςϜͷվળ͸ύϑΥʔϚϯε͕վ ળ͞Ε͍ͯΔͨΊ 3.4 ʹΞοϓάϨʔυ͢Δ͚ͩͰ Vue ΞϓϦͷύϑΥʔϚϯεߴΊͯ͘ΕΔ
72. Vue 3.4 • 3.4 Ͱ͸͍͔ͭ͘ػೳ͕࡟আ͞ΕΔ • ࡟আ͞ΕΔػೳ͸ɺجຊ 3.3 Ͱ࣮૷͞Ε͓ͯΓɺ ࢖͍ͬͯΔ৔߹͸ɺܯࠂΛग़ྗ͍ͯ͠Δɻ 
 ·ͨɺ࢖͍͍ͨ৔߹͸୅ସํ๏΋ఏڙ͍ͯ͠Δ • ͳͷͰɺ3.4 ʹҠߦ͢Δࡍ͸͍͖ͳΓ 3.4 ʹΞοϓ άϨʔυ͢ΔͷͰ͸ͳ͘ɺ3.3 Λհͯ͠ϚΠάϨʔ γϣϯ͓ͯ͘͠ͱεϜʔζʹ 3.4 ʹҠߦ͠΍͘͢ ͳ͍ͬͯΔ
73. Thank You! ❤