Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue 3.4
Search
kazupon
March 06, 2024
Programming
13
4.1k
Vue 3.4
kazupon
March 06, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
940
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
940
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Native-ESM powered web dev build tool
kazupon
5
1.4k
Other Decks in Programming
See All in Programming
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
300
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
100
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
Featured
See All Featured
What's new in Ruby 2.0
geeforr
337
31k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Become a Pro
speakerdeck
PRO
12
4.6k
The Cult of Friendly URLs
andyhume
74
5.7k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
How to Ace a Technical Interview
jacobian
273
22k
The Invisible Side of Design
smashingmag
294
49k
Agile that works and the tools we love
rasmusluckow
325
20k
Designing the Hi-DPI Web
ddemaree
276
33k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Transcript
Vue.js 3.4 v-tokyo#19 2024.03.06 @kazupon
ࣗݾհ
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
͡Ίʹ
2023 Vue 3.4 ϦϦʔεʂ https://blog.vuejs.org/posts/vue-3-4
ࠓ͢͜ͱ • Vue 3.4 ͰϦϦʔε͞Εͨ༰ʹ͍ͭͯ • ϚΠφʔΞοϓσʔτʹؔΘΒͣɺϦΞΫςΟϒ γεςϜίϯύΠϥपΓ͕େ͖͘Ξοϓσʔτ͞ Ε͍ͯΔͷͰɺͦͷลΓ༰ৄ͠Ίʹ
3.4 ϦϦʔε༰
ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • de fi neModel ͷ҆ఆԽ •
ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ
ഇࢭػೳ • άϩʔόϧ JSX ໊લۭؒ • Reactivity Transform • app.con
fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
ͦΕͰ ݟ͍͖ͯ·͠ΐ͏ʂ 👉
ػೳͱվળ ✨📈
v-bind লུه๏ͷαϙʔτ
• ม໊͕όΠϯυઌͷଐੑ·ͨ props ໊ͱಉ͡ͳ ΒলུͰ͖ΔΑ͏ʹͳͬͨ ಉ໊ͷলུه๏ Before After
• v-bind ͷಉ໊লུه๏ JavaScript ͷΦϒδΣΫτ ॳظԽ͢Δࡍͷলུه๏ͱಉ͡ JavaScript ͱࣅͨߏจ Vue v-bind
JavaScript มͷΈΛࢦఆ͢Δলུ ه๏ࣅ͍ͯΔ
de fi neModelͷ҆ఆԽ
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
de fi neModel ΛΘͳ͍߹… • de fi neProps ɺde fi
neEmits Λͬͯఆٛͯ͠ɺ͞Β ʹͷಉظΛͱΔͨΊͷίʔυΛॻ͔ͳ͚ΕͳΒ ͳ͔ͬͨ
ϋΠυϨʔγϣϯ पΓͷվળ
3.4 ҎલͰ͔ΓͮΒ͔ͬͨ
3.4 Ҏ߱Ͱվળʂ • ΫϥΠΞϯτͱαʔόʔͷϨϯμϦϯάͷࠩҟΛ ϝοηʔδ & DOM ϋΠϥΠτͰ֬ೝՄೳʹͳͬͨ classɺstyle ɺಈతόΠϯυͨ͠ଐੑνΣοΫͯ͘͠ΕΔ
production ͚ʹίϯύΠϥλΠϜϑϥάΛՃ • __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ʹΑΓɺproduction ڥͰ֬ೝͰ͖ΔΑ͏ʹͳͬ ͨ σόοά࣌ʹͷΈ༻͠·͠ΐ͏ʂ ϋΠυϨʔγϣϯपΓͷϩδοΫ͕όϯυϧ͞ΕΔͷͰ
Τϥʔίʔυͱ ίϯύΠϧλΠϜϑϥάͷ ϦϑΝϨϯεαϙʔτ
production ڥͰΤϥʔใΛআͯ͠͠·͏ • development ڥͰɺΤϥʔղফͷͨΊʹใΛ ఏڙ͢Δ͕ɺόϯυϧαΠζݮͷͨΊɺ production Ϗϧυ࣌ͦΕΒΛআ͢Δ Development Production
Τϥʔใ͕ Τϥʔίʔυʹ ஔ͖ΘΔ ΤϥʔίʔυΛݩʹ Vue ͷιʔείʔυ͔Βղಡ͕ඞཁ…
3.4 Ҏ߱Ͱ • ΤϥʔίʔυͷϦϑΝϨϯεΛࢀরͰ͖Δ URL ͕ ग़ྗ͞ΕΔΑ͏ʹͳΔ Development Production URL
ΛΫϦοΫͯ͠ϦϯϑΝϨϯεͱͯ͠ܝࡌ͞Ε͍ͯΔ ՕॴͰৄࡉใΛ֬ೝͰ͖Δ
3.4 ͰՃ͞ΕͨϦϑΝϨϯεϖʔδ • ެࣜυΩϡϝϯτʹ Ճ͞Εͨ • ϥϯλΠϜͱίϯύΠ ϥͷΤϥʔίʔυͱ ϝοηʔδ͕ҰཡͰఏ ڙ͞Ε͍ͯΔ
https://vuejs.org/error-reference/
ίϯύΠϧλΠϜϑϥάαϙʔτ • Vite ͳͲͷόϯυϥͰࢦఆ͢ΔίϯύΠϧλΠϜϑϥ άͷใެࣜυΩϡϝϯτͰใఏڙΛαϙʔτ https://ja.vuejs.org/api/compile-time- fl ags
ίϯύΠϥ ύϑΥʔϚϯεͷվળ
3.4 ͰίϯύΠϧ͕શମతʹ 44% ͘ͳ͍ͬͯΔ • Elk ΛͬͨϕϯνϚʔ Ϋ݁Ռ https://github.com/elk-zone/elk
• ܭଌ༰: SFC ղੳ ʙ JS ίʔυ & ιʔεϚοϓੜ·ͰΛ ܭଌ https://github.com/vuejs/core/pull/9674
Ͳ͏ͬͯͨ͘͠ͷ͔ 🏎💨
ύʔαʔΛ2ഒߴԽͨ͠ • ύʔαʔϑϧεΫϥον͔Βॻ͖͠ • 3.4 Ҏલ ࠶ؼԼ߱ߏจղੳ (Recursive Descent
Parsing) + ਖ਼نදݱ • 3.4 Ҏ߱ htmlparser2 ͔ΒϑΥʔΫͨ͠༗ݶΦʔτϚτϯΛ ͬͨτʔΫφΠβʔ ςϯϓϨʔτจࣈྻεΩϟϯΛઌಡΈͱ࠷খݶͷόοΫτ ϥοΫʹΑΓ1ԟ෮ͰॲཧͰ͖ΔΑ͏ʹͨ͠ https://github.com/vuejs/core/blob/main/packages/compiler-core/src/tokenizer.ts
ίʔυੜ40%ۙͨ͘͘͠ • ιʔεϚοϓͰඞཁʹͳΔҐஔใ (colum / row) ͷܭࢉΛ࠷దԽ • Vue ίϯύΠϥίʔυੜ(CodeGen)Ͱ
SFC ςϯϓϨʔτจ ࣈྻ͔ΒύʔαʔʹΑͬͯੜ͞Εͨ AST Λղੳͯ͠ɺAST ͷ֤ Node ͝ͱʹ JS ίʔυͷஅยతͳจࣈྻΛྻʹ push ͍ͯ͠Δ • ͦͷ࣌ʹɺιʔεϚοϓੜॲཧߦ͓ͬͯΓɺੜ͞ΕΔJS ίʔυଆ͔ΒSFC ςϯϓϨʔτଆͷҐஔΛಛఆͰ͖ΔΑ͏Ґஔ ใ Λܭࢉͯ͠Ϛοϐϯά͍ͯ͠Δ • ͦͷϚοϐϯάܭࢉॲཧͰɺྻʹੵ͞Εͨஅยతͳ JS ίʔυͷจࣈྻɺfor จΛ࣮ߦͯ͠ҐஔใΛܭࢉ͍ͯ͠Δ
ίʔυੜ40%ۙͨ͘͘͠ • ιʔεϚοϓੜ͢ΔͨΊʹඞཁͳॲཧίετͷ࠷దԽ • Vue ίϯύΠϥͰɺιʔεϚοϓੜʹ source-map-js ͱ͍͏ύοέʔδΛ͍ͬͯΔ • SourceMapGenerator.prototype.addMapping
ͰɺҾ ͷνΣοΫϚοϐϯάͷόϦσʔγϣϯΛ࣮ߦ͍ͯ͠Δ • ͦΕΒ Vue ίϯύΠϥʹͱͬͯΦʔόʔϔουͳͷͰɺ addMapping Λݺͣʹ෦APIΛݺͼग़͢͜ͱͰճආ
• VueίϯύΠϥ SFC ʹରͯ͠ύʔεΛ2ճ࣮ߦ͍ͯ͠ Δ • 1ճ: SFC ຊମ
SFC ͷ templateɺscriptɺstyle ͳͲΛநग़ • 2ճ: SFC ςϯϓϨʔτ ࠷ॳͷύʔεͰநग़͞Εͨ SFCϒϩοΫ template Λ ύʔε͢Δ SFCςϯϓϨʔτͷίϯύΠϧΛޮԽͨ͠
• 2 ճͷ SFCςϯϓϨʔτͷύʔεͰੜ͞ΕΔιʔεϚο ϓͷҐஔใɺ1ճͷ SFC ϒϩοΫԽͰੜ͞Εͨ ιʔεϚοϓͷҐஔใ͔ΒΦϑηοτʹͳ͍ͬͯͳ͍… • ͭ·ΓɺSFCςϯϓϨʔτ͕
JS ίʔυʹίϯύΠϧ͞ΕΔ ࡍʹɺ1ճͰੜ͞ΕͨιʔεϚοϓใΛݩʹɺSFC ς ϯϓϨʔτͷιʔεϚοϓͷҐஔใΛܭࢉͯ͠Ϛοϐϯ άͤ͞ͳ͚ΕͳΒͳ͍ SFCςϯϓϨʔτͷίϯύΠϧΛޮԽͨ͠ ύʔεͰੜ͞Εͨ AST ΛݩʹιʔεϚοϓΛϚοϐϯά ͢Δͷඇৗʹߴίετʂ
• 3.4 Ͱॻ͖͞ΕͨύʔαʔʹɺparseMode ΛՃ
• parseMode ʹΑͬͯύʔαʔɺSFC ςϯϓϨʔτͷύʔεͰ 1ճͷύʔεͰࣄલॲཧ͞Εͨ AST Λ2ճͷύʔεͰ࠶ ར༻͠ɺιʔεϚοϓͷϚοϐϯάॲཧճආ͢Δ͜ͱͰޮత ʹॲཧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ SFCςϯϓϨʔτͷίϯύΠϧΛޮԽͨ͠
ϦΞΫςΟϒγεςϜ ͷվળ
• Case1: computed ͷ͕มΘΒͳ͍ͷʹɺͦΕʹґଘ͢Δ computed ͕࣮ߦ͞Εͯ͠·ͬͨΓɺwatch / watchEffect ͷίʔϧόοΫɺrender
͕τϦΨʔ͞Εͯ ͠·͏ • Case2: ͋ΔϦΞΫςΟϒͳΛෳ computed ʹ͍ͯ͠Δͱ͖ ʹɺϦΞΫςΟϒ͕มΘͬͨͱ͖ʹɺwatch / watchEffect ͷίʔϧόοΫ͕ෳճτϦΨʔ͞Εͯ͠· ͏ 3.4 Ͱ computed पΓͷ༷ʑͳͳղܾ͞Ε͍ͯΔ
• Case3: ϦΞΫςΟϒͳྻͷ shiftɺunshiftɺsplice Ͱྻͷ ༰Λมߋ͢Δͱɺwatch / watchEffect ͷίʔϧόο
Ϋ͕ෳճτϦΨʔ͞Εͯ͠·͏ 3.4 Ͱ computed पΓͷ༷ʑͳͳղܾ͞Ε͍ͯΔ
• GitHub Issue https://github.com/vuejs/core/pull/5912 ͜͏͕ͨ͠ϦΞΫςΟϒվળ PR Ͱશͯमਖ਼͞Εͨ
• setInterval Ͱ ref ͳͰ͋Δ ms ߋ৽ʹΑͬͯɺsecɺ minɺhour ͷ computed
Λߋ৽͢ΔσϞ ͜ͷվળʹΑΓύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
Ͳ͏ͬͯ ύϑΥʔϚϯεΛվળͨ͠ͷ͔ 🏎💨
• 3.4Ҏલ: • deps.length = 0 Ͱొ͞Ε͍ͯΔ dep ܊Λআ͍ͯͨ͠ •
3.4Ҏ߱: • deps ͷొঢ়گΛΧϯλ _depsLength ʹΑͬͯཧ • _depsLength ͕Ϧηοτ͞ΕΔͷΈɻdeps ͷݹ͍ dep ৽͠ ͍ dep ʹΑ্ͬͯॻ͖͍ͯ͠Δ • ্ॻ͖͖͠Ε͍ͯͳ͍ deps ͷݹ͍ dep ܊ɺdeps.length = _depsLength ʹΑͬͯτϦϛϯά͞ΕΔ ෆඞཁͳ GC Λආ͚Δ
• DirtyLevels Λಋೖͯ͠ computed ͷ͕ԚΕ͍ͯΔ (ߋ৽͞Ε ͍ͯΔ)͔Ͳ͏͔νΣοΫͰ͖ΔΑ͏ʹɺReactiveEffect ʹͦ ͷঢ়ଶΛ࣋ͭΑ͏ʹ͍ͯ͠Δ •
ϦΞΫςΟϒͳͷߋ৽࣌ͷτϦΨʔʹ͓͍ͯɺ ReactiveEffect ΛεέδϡʔϥʔͰ࣮ߦͤ͞ΔͨΊʹɺɹ ΩϡʔΠϯά͢Δ͔Ͳ͏͔ DirtyLevels ͰผͰ͖ΔΑ͏ʹ͠ ͍ͯΔ • ͞Βʹ ReactiveEffect ʹɺͦΕࣗମ͕࣮ߦ͞Ε͍ͯΔ͔Ͳ͏ ͔ผ͢ΔΧϯλมΛ࣋ͭ͜ͱͰɺແବʹΩϡʔΠϯά ͤ͞ͳ͍Α͏ʹ੍ޚ͍ͯ͠Δ ReactiveEffect ͷ࣮ߦΛޮԽ
• ৽͘͠෦ API Ͱ͋Δ pauseSchedulingɺ resetScheduling ΛՃ • ͦΕʹΑͬͯɺReactiveEffect ͷ࣮ߦεέδϡʔϦϯ
άΛఀࢭͨ͠ΓɺϦηοτͯ͠Γ͢Δ͜ͱͰɺεέ δϡʔϦϯάΛࡉ੍͔͘ޚ͍ͯ͠Δ ͖Ίࡉ͔ͳεέδϡʔϦϯάௐ
ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641
• ϝϞϦ༻ྔͷվળ: ༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ effect (computed):
+118%~185% ͪͳΈʹ 3.4 ϦϦʔεޙվળଓ͍͍ͯΔ https://github.com/vuejs/core/pull/10397
ഇࢭػೳ 🙅⚠
άϩʔόϧ JSX ໊લۭؒ
3.4 ͔ΒάϩʔόϧͰͳ͘ͳͬͨ • React ͕ଘࡏ͢Δ։ൃϓϩδΣΫτʹ͓͍ͯίϯϑϦ Ϋτ͢ΔͨΊɺVue ͱڞଘͰ͖ΔΑ͏আͨ͠ https://github.com/vuejs/core/blob/98793a05a643e07baefef637ab6e7033aedcf8db/packages/vue/jsx.d.ts
3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ͏ํ๏ • tscon fi g ͷ
jsxImportSource ʹ ‘vue’ Λઃఆ
3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ͏ํ๏ • ͘͠ɺ ϑΝΠϧ͝ͱͷઌ಄ʹ
/* @jsxImportSource vue */ ΛՃ
3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ͏ํ๏ • طଘͷίʔυʹ JSX.Element ͳͲͷάϩʔόϧͳ JSX
໊લۭؒʹґଘ͢Δ߹ɺͦͷίʔυʹ “import ‘vue/jsx’ “ ΛՃ͢Δ https://github.com/intlify/vue-i18n-next/pull/1661
ͪͳΈʹ ͜ΕഁյతมߋͰͳ͍ͷʁ 🤔
ܕఆٛͷมߋ semver ͷΤοδέʔεʹͨΔ • Vue ͷόʔδϣχϯά ϙϦγʔ semver ͩ ͕ɺ͍͔ͭ͘ྫ֎͕͋
Δ • ͜ͷέʔε TypeScript ͷܕఆٛͷ ΤοδέʔεʹͨΔ ͷͰഁյతมߋʹ֘ ͠ͳ͍ https://ja.vuejs.org/about/releases#semantic-versioning-edge-cases
Reactivity Transform
• 3.2 Ͱ࣮ݧతػೳͱͯ͠ೖ͕ͬͨ 3.3 ͰඇਪΛΞ φϯε Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform
• લճͷ v-tokyo#18 ͷεϥΠυͰ·ͱΊ͍ͯΔͷͰ ؾʹͳΔํɺͦͪΒΛࢀߟʹʂ ഇࢭ͢Δཧ༝ https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023?slide=27
app.con fi g.unwrapInjectedRef
app.con fi g.unwrapInjectedRef ͱԿʁ • 3.2 ҎલͰ Composition API Λͬͯ
Provide / Inject ͨ͠ ࣌ɺςϯϓϨʔτͰ `.value` ͕ͳ͍ͱಈ͔ͳ͍͕͋ͬͨ • ͦͷղܾҊͱͯ͠ΦϓγϣϯϑϥάͰճආͰ͖ΔҰ࣌తʹ ఏڙ͞ΕͨιϦϡʔγϣϯ https://github.com/vuejs/core/issues/4196
• 3.3 Ͱఏڙ͞Εɺ मਖ਼͞ΕͨͨΊɺͦ Εͱಉ࣌ʹ deprecated ѻ͍ • ͳͷͰެࣜυΩϡϝϯ τʹࡌΒͳ͔ͬͨ
• ϦϦʔεͷஈ֊Λܦ ͯ 3.4 Ͱআʹͳͬͨ https://github.com/vuejs/core/commit/561e210157874b216efc1c17be701a6a81c4383b ໋ʹऴΘͬͨݬͷΦϓγϣϯ
vnode ϓϦϑΟοΫε ʹΑΔ ΠϕϯτϦεφʔ
vnode ϓϦϑΟΫεΑΔΠϕϯτϦεφʔͱԿʁ • Vue Ͱ v-on Ͱ Virtual DOM ϨΠϠʔͷϥΠϑ
αΠΫϧΠϕϯτΛ Hook Ͱ͖ΔΠϕϯτϋ ϯυϥʔΛ͏͜ͱ͕ Ͱ͖Δ
ࠓճมߋରͱͳΔ VNode ϥΠϑαΠΫϧΠϕϯτ • vnode-before-mount • vnode-mounted • vnode-before-update •
vnode-updated • vnode-before-unmount • vnode-unmounted runtime-core.d.ts Ͱఆٛ͞Ε͍ͯΔܕఆٛͷHook
ϓϨϑΟοΫε͕ `vnode` Ͱͳ͘ `vue:`ʹมߋ • มߋ 3.3 Ͱ࣮͞Ε͓ͯΓɺͬͨ߹ deprecate ͳܯࠂ͕ग़ྗ͞ΕΔ
ϓϨϑΟοΫε͕ `vnode` Ͱͳ͘ `vue:`ʹมߋ • 3.4 Ͱͬͨ߹ɺΤϥʔ͕ग़ྗ͞ΕͯϏϧυͰ͖ͳ ͍Α͏ʹͳ͍ͬͯΔ
v-is σΟϨΫςΟϒ
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
3.4 Ҏ߱ v-is શʹഇࢭ • 3.3 Ͱ v-is σΟϨΫςΟϒ͔Β ‘vue:’
ϓϨϑΟοΫε͖ Ͱ Vue ίϯϙʔωϯτΛ is ଐੑʹ༻͢ΔΑ͏มߋ • is ଐੑʹ౷߹͞Εͨ͜ͱʹΑΓ is ଐੑͱ v-is Λ͍͚ Δೝෛՙ͕ݮͬͨ
·ͱΊ
Vue 3.4 • Vue 3.4 ͰϦϦʔε͞Εͨػೳͱվળɺͦͯ͠ഇࢭ ػೳʹ͍ͭͯͨ͠ • v-bind লུه๏ɺde
fi neModel ਖ਼ࣜαϙʔτΞϓ Ϧͷ։ൃੜ࢈ੑΛߴΊͯ͘Δ • ϋΠυϨʔγϣϯϛεϚονใͷվળΤϥʔ ίʔυϦϑΝϨϯεͷఏڙɺσόοάΛॿ͚ͯ͘ ΕΔ
Vue 3.4 • ίϯύΠϥύϑΥʔϚϯεͷվળɺίϯύΠϧ(Ϗ ϧυ)͕࣌ؒॖ͞ΕΔͨΊɺ։ൃ࣌ͷ։ൃੜ࢈ੑ ɺσϓϩΠͷࡍɺσϓϩΠ࣌ؒΛॖͤͯ͘͞Ε Δ • ϦΞΫςΟϒγεςϜͷվળύϑΥʔϚϯε͕վ ળ͞Ε͍ͯΔͨΊ
3.4 ʹΞοϓάϨʔυ͢Δ͚ͩͰ Vue ΞϓϦͷύϑΥʔϚϯεߴΊͯ͘ΕΔ
Vue 3.4 • 3.4 Ͱ͍͔ͭ͘ػೳ͕আ͞ΕΔ • আ͞ΕΔػೳɺجຊ 3.3 Ͱ࣮͞Ε͓ͯΓɺ ͍ͬͯΔ߹ɺܯࠂΛग़ྗ͍ͯ͠Δɻ
·ͨɺ͍͍ͨ߹ସํ๏ఏڙ͍ͯ͠Δ • ͳͷͰɺ3.4 ʹҠߦ͢Δࡍ͍͖ͳΓ 3.4 ʹΞοϓ άϨʔυ͢ΔͷͰͳ͘ɺ3.3 Λհͯ͠ϚΠάϨʔ γϣϯ͓ͯ͘͠ͱεϜʔζʹ 3.4 ʹҠߦ͘͢͠ ͳ͍ͬͯΔ
Thank You! ❤