Vue 3.4 - Speaker Deck

by kazupon

Slide 1

Slide 1 text

Vue.js 3.4 v-tokyo#19 2024.03.06 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

͸͡Ίʹ

Slide 5

Slide 5 text

2023೥຤ Vue 3.4 ϦϦʔεʂ https://blog.vuejs.org/posts/vue-3-4

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ • Vue 3.4 ͰϦϦʔε͞Εͨ಺༰ʹ͍ͭͯ • ϚΠφʔΞοϓσʔτʹ΋ؔΘΒͣɺϦΞΫςΟϒ γεςϜ΍ίϯύΠϥपΓ͕େ͖͘Ξοϓσʔτ͞ Ε͍ͯΔͷͰɺͦͷลΓ͸಺༰͸ৄ͠Ίʹ

Slide 7

Slide 7 text

3.4 ϦϦʔε಺༰

Slide 8

Slide 8 text

ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • de fi neModel ͷ҆ఆԽ • ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ

Slide 9

Slide 9 text

ഇࢭػೳ • άϩʔόϧ JSX ໊લۭؒ • Reactivity Transform • app.con fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ

Slide 10

Slide 10 text

ͦΕͰ͸ ݟ͍͖ͯ·͠ΐ͏ʂ 👉

Slide 11

Slide 11 text

ػೳͱվળ ✨📈

Slide 12

Slide 12 text

v-bind লུه๏ͷαϙʔτ

Slide 13

Slide 13 text

• ม਺໊͕όΠϯυઌͷଐੑ·ͨ͸ props ໊ͱಉ͡ͳ Β͹লུͰ͖ΔΑ͏ʹͳͬͨ ಉ໊ͷলུه๏ Before After

Slide 14

Slide 14 text

• v-bind ͷಉ໊লུه๏͸ JavaScript ͷΦϒδΣΫτ ॳظԽ͢Δࡍͷলུه๏ͱಉ͡ JavaScript ͱࣅͨߏจ Vue v-bind JavaScript ม਺ͷΈΛࢦఆ͢Δলུ ه๏͸ࣅ͍ͯΔ

Slide 15

Slide 15 text

de fi neModelͷ҆ఆԽ

Slide 16

Slide 16 text

de fi neModel • Ͱ v-model ͰόΠϯυ͢Δ props Λ ఆٛͰ͖Δ syntax sugar ͷΑ͏ͳϚΫϩ • 3.3 Ͱ࣮ݧతػೳͱͯ͠ϦϦʔε͞Εɺ3.4 Ͱ੖Εͯ ਖ਼ࣜػೳʹͳͬͨ https://ja.vuejs.org/api/sfc-script-setup#de fi nemodel

Slide 17

Slide 17 text

de fi neModel Λ࢖Θͳ͍৔߹͸… • de fi neProps ɺde fi neEmits Λ࢖ͬͯఆٛͯ͠ɺ͞Β ʹ஋ͷಉظΛͱΔͨΊͷίʔυΛॻ͔ͳ͚Ε͹ͳΒ ͳ͔ͬͨ

Slide 18

Slide 18 text

ϋΠυϨʔγϣϯ पΓͷվળ

Slide 19

Slide 19 text

3.4 ҎલͰ͸෼͔ΓͮΒ͔ͬͨ

Slide 20

Slide 20 text

3.4 Ҏ߱Ͱ͸վળʂ • ΫϥΠΞϯτͱαʔόʔͷϨϯμϦϯάͷࠩҟΛ ϝοηʔδ & DOM ϋΠϥΠτͰ֬ೝՄೳʹͳͬͨ classɺstyle ɺಈతόΠϯυͨ͠ଐੑ΋νΣοΫͯ͘͠ΕΔ

Slide 21

Slide 21 text

production ޲͚ʹίϯύΠϥλΠϜϑϥάΛ௥Ճ • __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ʹΑΓɺproduction ؀ڥͰ΋֬ೝͰ͖ΔΑ͏ʹͳͬ ͨ σόοά࣌ʹͷΈ࢖༻͠·͠ΐ͏ʂ ϋΠυϨʔγϣϯपΓͷϩδοΫ͕όϯυϧ͞ΕΔͷͰ

Slide 22

Slide 22 text

Τϥʔίʔυͱ ίϯύΠϧλΠϜϑϥάͷ ϦϑΝϨϯεαϙʔτ

Slide 23

Slide 23 text

production ؀ڥͰ͸Τϥʔ৘ใΛ࡟আͯ͠͠·͏ • development ؀ڥͰ͸ɺΤϥʔղফͷͨΊʹ৘ใΛ ఏڙ͢Δ͕ɺόϯυϧαΠζ࡟ݮͷͨΊɺ production Ϗϧυ࣌͸ͦΕΒΛ࡟আ͢Δ Development Production Τϥʔ৘ใ͕ Τϥʔίʔυʹ ஔ͖׵ΘΔ ΤϥʔίʔυΛݩʹ Vue ͷιʔείʔυ͔Βղಡ͕ඞཁ…

Slide 24

Slide 24 text

3.4 Ҏ߱Ͱ͸ • ΤϥʔίʔυͷϦϑΝϨϯεΛࢀরͰ͖Δ URL ͕ ग़ྗ͞ΕΔΑ͏ʹͳΔ Development Production URL ΛΫϦοΫͯ͠ϦϯϑΝϨϯεͱͯ͠ܝࡌ͞Ε͍ͯΔ ՕॴͰৄࡉ৘ใΛ֬ೝͰ͖Δ

Slide 25

Slide 25 text

3.4 Ͱ௥Ճ͞ΕͨϦϑΝϨϯεϖʔδ • ެࣜυΩϡϝϯτʹ௥ Ճ͞Εͨ • ϥϯλΠϜͱίϯύΠ ϥͷΤϥʔίʔυͱ ϝοηʔδ͕ҰཡͰఏ ڙ͞Ε͍ͯΔ https://vuejs.org/error-reference/

Slide 26

Slide 26 text

ίϯύΠϧλΠϜϑϥά΋αϙʔτ • Vite ͳͲͷόϯυϥͰࢦఆ͢ΔίϯύΠϧλΠϜϑϥ άͷ৘ใ΋ެࣜυΩϡϝϯτͰ৘ใఏڙΛαϙʔτ https://ja.vuejs.org/api/compile-time- fl ags

Slide 27

Slide 27 text

ίϯύΠϥ ύϑΥʔϚϯεͷվળ

Slide 28

Slide 28 text

3.4 Ͱ͸ίϯύΠϧ͕શମతʹ 44% ଎͘ͳ͍ͬͯΔ • Elk Λ࢖ͬͨϕϯνϚʔ Ϋ݁Ռ   https://github.com/elk-zone/elk • ܭଌ಺༰:   SFC ղੳ ʙ JS ίʔυ & ιʔεϚοϓੜ੒·ͰΛ ܭଌ https://github.com/vuejs/core/pull/9674

Slide 29

Slide 29 text

Ͳ͏΍ͬͯ଎ͨ͘͠ͷ͔ 🏎💨

Slide 30

Slide 30 text

ύʔαʔΛ2ഒߴ଎Խͨ͠ • ύʔαʔ͸ϑϧεΫϥον͔Βॻ͖௚͠ • 3.4 Ҏલ   ࠶ؼԼ߱ߏจղੳ (Recursive Descent Parsing) + ਖ਼نදݱ • 3.4 Ҏ߱   htmlparser2 ͔ΒϑΥʔΫͨ͠༗ݶΦʔτϚτϯΛ ࢖ͬͨτʔΫφΠβʔ ςϯϓϨʔτจࣈྻεΩϟϯΛઌಡΈͱ࠷খݶͷόοΫτ ϥοΫʹΑΓ1ԟ෮ͰॲཧͰ͖ΔΑ͏ʹͨ͠ https://github.com/vuejs/core/blob/main/packages/compiler-core/src/tokenizer.ts

Slide 31

Slide 31 text

ίʔυੜ੒΋40%ۙ͘଎ͨ͘͠ • ιʔεϚοϓͰඞཁʹͳΔҐஔ৘ใ (colum / row) ͷܭࢉΛ࠷దԽ • Vue ίϯύΠϥ͸ίʔυੜ੒(CodeGen)Ͱ͸ SFC ςϯϓϨʔτจ ࣈྻ͔ΒύʔαʔʹΑͬͯੜ੒͞Εͨ AST Λղੳͯ͠ɺAST ͷ֤ Node ͝ͱʹ JS ίʔυͷஅยతͳจࣈྻΛ഑ྻʹ push ͍ͯ͠Δ • ͦͷ࣌ʹɺιʔεϚοϓ΋ੜ੒ॲཧ΋ߦ͓ͬͯΓɺੜ੒͞ΕΔJS ίʔυଆ͔ΒSFC ςϯϓϨʔτଆͷҐஔΛಛఆͰ͖ΔΑ͏Ґஔ৘ ใ Λܭࢉͯ͠Ϛοϐϯά͍ͯ͠Δ • ͦͷϚοϐϯάܭࢉॲཧͰ͸ɺ഑ྻʹ஝ੵ͞Εͨஅยతͳ JS ίʔυͷจࣈྻ෼ɺfor จΛ࣮ߦͯ͠Ґஔ৘ใΛܭࢉ͍ͯ͠Δ

Slide 32

Slide 32 text

ίʔυੜ੒΋40%ۙ͘଎ͨ͘͠ • ιʔεϚοϓੜ੒͢ΔͨΊʹඞཁͳॲཧίετͷ࠷దԽ • Vue ίϯύΠϥͰ͸ɺιʔεϚοϓੜ੒ʹ source-map-js ͱ͍͏ύοέʔδΛ࢖͍ͬͯΔ • SourceMapGenerator.prototype.addMapping ಺Ͱ͸ɺҾ਺ ͷνΣοΫ΍ϚοϐϯάͷόϦσʔγϣϯΛ࣮ߦ͍ͯ͠Δ • ͦΕΒ͸ Vue ίϯύΠϥʹͱͬͯΦʔόʔϔουͳͷͰɺ addMapping Λݺ͹ͣʹ಺෦APIΛݺͼग़͢͜ͱͰճආ

Slide 33

Slide 33 text

• VueίϯύΠϥ͸ SFC ʹରͯ͠ύʔεΛ2ճ࣮ߦ͍ͯ͠ Δ • 1ճ໨: SFC ຊମ   SFC ͷ templateɺscriptɺstyle ͳͲΛநग़ • 2ճ໨: SFC ςϯϓϨʔτ   ࠷ॳͷύʔεͰநग़͞Εͨ SFCϒϩοΫ template Λ ύʔε͢Δ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠

Slide 34

Slide 34 text

• 2 ճ໨ͷ SFCςϯϓϨʔτͷύʔεͰੜ੒͞ΕΔιʔεϚο ϓͷҐஔ৘ใ͸ɺ1ճ໨ͷ SFC ϒϩοΫԽͰੜ੒͞Εͨ ιʔεϚοϓͷҐஔ৘ใ͔ΒΦϑηοτʹͳ͍ͬͯͳ͍… • ͭ·ΓɺSFCςϯϓϨʔτ͕ JS ίʔυʹίϯύΠϧ͞ΕΔ ࡍʹɺ1ճ໨Ͱੜ੒͞ΕͨιʔεϚοϓ৘ใΛݩʹɺSFC ς ϯϓϨʔτͷιʔεϚοϓͷҐஔ৘ใΛܭࢉͯ͠Ϛοϐϯ άͤ͞ͳ͚Ε͹ͳΒͳ͍ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠ ύʔεͰੜ੒͞Εͨ AST ΛݩʹιʔεϚοϓΛϚοϐϯά ͢Δͷ͸ඇৗʹߴίετʂ

Slide 35

Slide 35 text

• 3.4 Ͱॻ͖௚͞ΕͨύʔαʔʹɺparseMode Λ௥Ճ                   • parseMode ʹΑͬͯύʔαʔ͸ɺSFC ςϯϓϨʔτͷύʔεͰ ΋1ճ໨ͷύʔεͰࣄલॲཧ͞Εͨ AST Λ2ճ໨ͷύʔεͰ΋࠶ ར༻͠ɺιʔεϚοϓͷϚοϐϯάॲཧ΋ճආ͢Δ͜ͱͰޮ཰త ʹॲཧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠

Slide 36

Slide 36 text

ϦΞΫςΟϒγεςϜ ͷվળ

Slide 37

Slide 37 text

• Case1:   computed ͷ஋͕มΘΒͳ͍ͷʹɺͦΕʹґଘ͢Δ computed ͕࣮ߦ͞Εͯ͠·ͬͨΓɺwatch / watchEffect ͷίʔϧόοΫ΍ɺrender ͕τϦΨʔ͞Εͯ ͠·͏ • Case2:   ͋ΔϦΞΫςΟϒͳ஋Λෳ਺ computed ʹ͍ͯ͠Δͱ͖ ʹɺϦΞΫςΟϒ஋͕มΘͬͨͱ͖ʹɺwatch / watchEffect ͷίʔϧόοΫ͕ෳ਺ճτϦΨʔ͞Εͯ͠· ͏ 3.4 Ͱ͸ computed पΓͷ༷ʑͳ໰୊ͳղܾ͞Ε͍ͯΔ

Slide 38

Slide 38 text

• Case3:   ϦΞΫςΟϒͳ഑ྻͷ shiftɺunshiftɺsplice Ͱ഑ྻͷ ಺༰Λมߋ͢Δͱɺwatch / watchEffect ͷίʔϧόο Ϋ͕ෳ਺ճτϦΨʔ͞Εͯ͠·͏ 3.4 Ͱ͸ computed पΓͷ༷ʑͳ໰୊ͳղܾ͞Ε͍ͯΔ

Slide 39

Slide 39 text

• GitHub Issue   https://github.com/vuejs/core/pull/5912 ͜͏ͨ͠໰୊͕ϦΞΫςΟϒվળ PR Ͱશͯमਖ਼͞Εͨ

Slide 40

Slide 40 text

• setInterval Ͱ ref ͳ஋Ͱ͋Δ ms ߋ৽ʹΑͬͯɺsecɺ minɺhour ͷ computed Λߋ৽͢ΔσϞ ͜ͷվળʹΑΓύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449

Slide 41

Slide 41 text

Ͳ͏΍ͬͯ ύϑΥʔϚϯεΛվળͨ͠ͷ͔ 🏎💨

Slide 42

Slide 42 text

• 3.4Ҏલ: • deps.length = 0 Ͱొ࿥͞Ε͍ͯΔ dep ܊Λ࡟আ͍ͯͨ͠ • 3.4Ҏ߱: • deps ͷొ࿥ঢ়گΛΧ΢ϯλ _depsLength ʹΑͬͯ؅ཧ • _depsLength ͕Ϧηοτ͞ΕΔͷΈɻdeps ಺ͷݹ͍ dep ͸৽͠ ͍ dep ʹΑ্ͬͯॻ͖͍ͯ͠Δ • ্ॻ͖͖͠Ε͍ͯͳ͍ deps ಺ͷݹ͍ dep ܊͸ɺdeps.length = _depsLength ʹΑͬͯτϦϛϯά͞ΕΔ ෆඞཁͳ GC Λආ͚Δ

Slide 43

Slide 43 text

• DirtyLevels Λಋೖͯ͠ computed ͷ஋͕ԚΕ͍ͯΔ (ߋ৽͞Ε ͍ͯΔ)͔Ͳ͏͔νΣοΫͰ͖ΔΑ͏ʹɺReactiveEffect ʹͦ ͷঢ়ଶΛ࣋ͭΑ͏ʹ͍ͯ͠Δ • ϦΞΫςΟϒͳ஋ͷߋ৽࣌ͷτϦΨʔʹ͓͍ͯɺ ReactiveEffect ΛεέδϡʔϥʔͰ࣮ߦͤ͞ΔͨΊʹɺɹ ΩϡʔΠϯά͢Δ͔Ͳ͏͔ DirtyLevels Ͱ൑ผͰ͖ΔΑ͏ʹ͠ ͍ͯΔ • ͞Βʹ ReactiveEffect ʹɺͦΕࣗମ͕࣮ߦ͞Ε͍ͯΔ͔Ͳ͏ ͔൑ผ͢ΔΧ΢ϯλม਺Λ࣋ͭ͜ͱͰɺແବʹΩϡʔΠϯά ͤ͞ͳ͍Α͏ʹ੍ޚ͍ͯ͠Δ ReactiveEffect ͷ࣮ߦΛޮ཰Խ

Slide 44

Slide 44 text

• ৽͘͠಺෦ API Ͱ͋Δ pauseSchedulingɺ resetScheduling Λ௥Ճ • ͦΕʹΑͬͯɺReactiveEffect ͷ࣮ߦεέδϡʔϦϯ άΛఀࢭͨ͠ΓɺϦηοτͯ͠Γ͢Δ͜ͱͰɺεέ δϡʔϦϯάΛࡉ੍͔͘ޚ͍ͯ͠Δ ͖Ίࡉ΍͔ͳεέδϡʔϦϯάௐ੔

Slide 45

Slide 45 text

ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641

Slide 46

Slide 46 text

• ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳): +118%~185% ͪͳΈʹ 3.4 ϦϦʔεޙ΋վળ͸ଓ͍͍ͯΔ https://github.com/vuejs/core/pull/10397

Slide 47

Slide 47 text

ഇࢭػೳ 🙅⚠

Slide 48

Slide 48 text

άϩʔόϧ JSX ໊લۭؒ

Slide 49

Slide 49 text

3.4 ͔ΒάϩʔόϧͰ͸ͳ͘ͳͬͨ • React ͕ଘࡏ͢Δ։ൃϓϩδΣΫτʹ͓͍ͯίϯϑϦ Ϋτ͢ΔͨΊɺVue ͱڞଘͰ͖ΔΑ͏࡟আͨ͠ https://github.com/vuejs/core/blob/98793a05a643e07baefef637ab6e7033aedcf8db/packages/vue/jsx.d.ts

Slide 50

Slide 50 text

3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • tscon fi g ͷ jsxImportSource ʹ ‘vue’ Λઃఆ  

Slide 51

Slide 51 text

3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • ΋͘͠͸ɺ   ϑΝΠϧ͝ͱͷઌ಄ʹ   /* @jsxImportSource vue */     Λ௥Ճ

Slide 52

Slide 52 text

3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • طଘͷίʔυʹ JSX.Element ͳͲͷάϩʔόϧͳ JSX ໊લۭؒʹґଘ͢Δ৔߹͸ɺͦͷίʔυʹ “import ‘vue/jsx’ “ Λ௥Ճ͢Δ https://github.com/intlify/vue-i18n-next/pull/1661

Slide 53

Slide 53 text

ͪͳΈʹ ͜Ε͸ഁյతมߋͰ͸ͳ͍ͷʁ 🤔

Slide 54

Slide 54 text

ܕఆٛͷมߋ͸ semver ͷΤοδέʔεʹ౰ͨΔ • Vue ͷόʔδϣχϯά ϙϦγʔ͸ semver ͩ ͕ɺ͍͔ͭ͘ྫ֎͕͋ Δ • ͜ͷέʔε͸ TypeScript ͷܕఆٛͷ Τοδέʔεʹ౰ͨΔ ͷͰഁյతมߋʹ֘౰ ͠ͳ͍ https://ja.vuejs.org/about/releases#semantic-versioning-edge-cases

Slide 55

Slide 55 text

Reactivity Transform

Slide 56

Slide 56 text

• 3.2 Ͱ࣮ݧతػೳͱͯ͠ೖ͕ͬͨ 3.3 Ͱඇਪ঑ΛΞ φ΢ϯε Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform

Slide 57

Slide 57 text

• લճͷ v-tokyo#18 ͷεϥΠυͰ·ͱΊ͍ͯΔͷͰ ؾʹͳΔํ͸ɺͦͪΒΛࢀߟʹʂ ഇࢭ͢Δཧ༝ https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023?slide=27

Slide 58

Slide 58 text

app.con fi g.unwrapInjectedRef

Slide 59

Slide 59 text

app.con fi g.unwrapInjectedRef ͱ͸Կʁ • 3.2 ҎલͰ Composition API Λ࢖ͬͯ Provide / Inject ͨ͠ ࣌ɺςϯϓϨʔτͰ `.value` ͕ͳ͍ͱಈ͔ͳ͍໰୊͕͋ͬͨ • ͦͷղܾҊͱͯ͠ΦϓγϣϯϑϥάͰճආͰ͖ΔҰ࣌తʹ ఏڙ͞ΕͨιϦϡʔγϣϯ https://github.com/vuejs/core/issues/4196

Slide 60

Slide 60 text

• 3.3 Ͱఏڙ͞Εɺ໰୊ ΋मਖ਼͞ΕͨͨΊɺͦ Εͱಉ࣌ʹ deprecated ѻ͍ • ͳͷͰެࣜυΩϡϝϯ τʹ΋ࡌΒͳ͔ͬͨ • ϦϦʔεͷஈ֊Λܦ ͯ 3.4 Ͱ࡟আʹͳͬͨ https://github.com/vuejs/core/commit/561e210157874b216efc1c17be701a6a81c4383b ୹໋ʹऴΘͬͨݬͷΦϓγϣϯ

Slide 61

Slide 61 text

vnode ϓϦϑΟοΫε ʹΑΔ ΠϕϯτϦεφʔ

Slide 62

Slide 62 text

vnode ϓϦϑΟΫεΑΔΠϕϯτϦεφʔͱ͸Կʁ • Vue Ͱ͸ v-on Ͱ Virtual DOM ϨΠϠʔͷϥΠϑ αΠΫϧΠϕϯτΛ Hook Ͱ͖ΔΠϕϯτϋ ϯυϥʔΛ࢖͏͜ͱ͕ Ͱ͖Δ

Slide 63

Slide 63 text

ࠓճมߋର৅ͱͳΔ VNode ϥΠϑαΠΫϧΠϕϯτ • vnode-before-mount • vnode-mounted • vnode-before-update • vnode-updated • vnode-before-unmount • vnode-unmounted runtime-core.d.ts Ͱఆٛ͞Ε͍ͯΔܕఆٛͷHook

Slide 64

Slide 64 text

ϓϨϑΟοΫε͕ `vnode` Ͱ͸ͳ͘ `vue:`ʹมߋ • มߋ͸ 3.3 Ͱ࣮૷͞Ε͓ͯΓɺ࢖ͬͨ৔߹ deprecate ͳܯࠂ͕ग़ྗ͞ΕΔ

Slide 65

Slide 65 text

ϓϨϑΟοΫε͕ `vnode` Ͱ͸ͳ͘ `vue:`ʹมߋ • 3.4 Ͱ࢖ͬͨ৔߹͸ɺΤϥʔ͕ग़ྗ͞ΕͯϏϧυͰ͖ͳ ͍Α͏ʹͳ͍ͬͯΔ

Slide 66

Slide 66 text

v-is σΟϨΫςΟϒ

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

3.4 Ҏ߱ v-is ͸׬શʹഇࢭ • 3.3 Ͱ v-is σΟϨΫςΟϒ͔Β ‘vue:’ ϓϨϑΟοΫε෇͖ Ͱ Vue ίϯϙʔωϯτΛ is ଐੑʹ࢖༻͢ΔΑ͏มߋ • is ଐੑʹ౷߹͞Εͨ͜ͱʹΑΓ is ଐੑͱ v-is Λ࢖͍෼͚ Δೝ஌ෛՙ͕ݮͬͨ

Slide 69

Slide 69 text

·ͱΊ

Slide 70

Slide 70 text

Vue 3.4 • Vue 3.4 ͰϦϦʔε͞Εͨػೳͱվળɺͦͯ͠ഇࢭ ػೳʹ͍ͭͯ࿩ͨ͠ • v-bind লུه๏ɺde fi neModel ਖ਼ࣜαϙʔτ͸Ξϓ Ϧͷ։ൃੜ࢈ੑΛߴΊͯ͘Δ • ϋΠυϨʔγϣϯϛεϚον৘ใͷվળ΍Τϥʔ ίʔυϦϑΝϨϯεͷఏڙ͸ɺσόοάΛॿ͚ͯ͘ ΕΔ

Slide 71

Slide 71 text

Vue 3.4 • ίϯύΠϥύϑΥʔϚϯεͷվળ͸ɺίϯύΠϧ(Ϗ ϧυ)͕࣌ؒ୹ॖ͞ΕΔͨΊɺ։ൃ࣌ͷ։ൃੜ࢈ੑ ΍ɺσϓϩΠͷࡍɺσϓϩΠ࣌ؒΛ୹ॖͤͯ͘͞Ε Δ • ϦΞΫςΟϒγεςϜͷվળ͸ύϑΥʔϚϯε͕վ ળ͞Ε͍ͯΔͨΊ 3.4 ʹΞοϓάϨʔυ͢Δ͚ͩͰ Vue ΞϓϦͷύϑΥʔϚϯεߴΊͯ͘ΕΔ

Slide 72

Slide 72 text

Vue 3.4 • 3.4 Ͱ͸͍͔ͭ͘ػೳ͕࡟আ͞ΕΔ • ࡟আ͞ΕΔػೳ͸ɺجຊ 3.3 Ͱ࣮૷͞Ε͓ͯΓɺ ࢖͍ͬͯΔ৔߹͸ɺܯࠂΛग़ྗ͍ͯ͠Δɻ   ·ͨɺ࢖͍͍ͨ৔߹͸୅ସํ๏΋ఏڙ͍ͯ͠Δ • ͳͷͰɺ3.4 ʹҠߦ͢Δࡍ͸͍͖ͳΓ 3.4 ʹΞοϓ άϨʔυ͢ΔͷͰ͸ͳ͘ɺ3.3 Λհͯ͠ϚΠάϨʔ γϣϯ͓ͯ͘͠ͱεϜʔζʹ 3.4 ʹҠߦ͠΍͘͢ ͳ͍ͬͯΔ

Slide 73

Slide 73 text

Thank You! ❤