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
4k
Vue 3.4
kazupon
March 06, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
2
850
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
Code Reviews
bkuhlmann
4
890
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
ONE WEDGE_company_guide
1wedge_one
0
500
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
Hanami and htmx
bkuhlmann
0
210
ゆるい個人開発のススメ
kuroppe1819
10
990
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Fragment Composition of GraphQL
quramy
7
1k
Anthropic Cookbook のおすすめレシピ
schroneko
7
1k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
990
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
Six Lessons from altMBA
skipperchong
21
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Web Components: a chance to create the future
zenorocha
305
41k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Building Your Own Lightsaber
phodgson
99
5.7k
Ruby is Unlike a Banana
tanoku
96
10k
Producing Creativity
orderedlist
PRO
337
39k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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! ❤