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.3k
Vue 3.4
kazupon
March 06, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.3k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.2k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
970
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
520
まちにまった Vue.js 3
kazupon
14
5.4k
Native-ESM powered web dev build tool
kazupon
5
1.5k
Other Decks in Programming
See All in Programming
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Activities at Cairo Library
cairolibrary720
0
1.2k
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
Terraformテスト入門
msato
0
540
【Go言語】golangci-lintの使い方
tomo1227
0
280
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
【Go言語】ジェネリクス
tomo1227
0
170
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Advanced App Shrinking Techniques
cbeyls
2
150
Featured
See All Featured
Building Adaptive Systems
keathley
34
2k
How STYLIGHT went responsive
nonsquared
93
5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
BBQ
matthewcrist
82
9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Code Review Best Practice
trishagee
58
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
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! ❤