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
520
Vapor Revolution
kazupon
3
3.7k
Vue.js最新動向
kazupon
3
1.6k
Vue & Vite Rustify
kazupon
4
2.3k
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
640
Other Decks in Programming
See All in Programming
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
470
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
CSC305 Lecture 01
javiergs
PRO
1
400
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
910
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
CSC305 Lecture 04
javiergs
PRO
0
250
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
クラシルを支える技術と組織
rakutek
0
190
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Six Lessons from altMBA
skipperchong
28
4k
Bash Introduction
62gerente
615
210k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Agile that works and the tools we love
rasmusluckow
331
21k
For a Future-Friendly Web
brad_frost
180
9.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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! ❤