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.7k
Vue 3.4
kazupon
March 06, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
530
Vapor Revolution
kazupon
3
3.7k
Vue.js最新動向
kazupon
3
1.6k
Vue & Vite Rustify
kazupon
4
2.4k
Vue.jsエコシステム動向2023
kazupon
17
8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
State of Vue I18n
kazupon
3
650
Other Decks in Programming
See All in Programming
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.2k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Software Architecture
hschwentner
6
2.3k
contribution to astral-sh/uv
shunsock
0
540
Pythonに漸進的に型をつける
nealle
1
120
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
NIKKEI Tech Talk#38
cipepser
0
230
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
KATA
mclloyd
PRO
32
15k
YesSQL, Process and Tooling at Scale
rocio
173
15k
GitHub's CSS Performance
jonrohan
1032
470k
Designing for humans not robots
tammielis
254
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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! ❤