Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue 3.4

kazupon
March 06, 2024

Vue 3.4

kazupon

March 06, 2024
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. 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
  2. ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • de fi neModel ͷ҆ఆԽ •

    ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ
  3. ഇࢭػೳ • άϩʔόϧ JSX ໊લۭؒ • Reactivity Transform • app.con

    fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
  4. 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
  5. de fi neModel Λ࢖Θͳ͍৔߹͸… • de fi neProps ɺde fi

    neEmits Λ࢖ͬͯఆٛͯ͠ɺ͞Β ʹ஋ͷಉظΛͱΔͨΊͷίʔυΛॻ͔ͳ͚Ε͹ͳΒ ͳ͔ͬͨ
  6. 3.4 Ҏ߱Ͱ͸ • ΤϥʔίʔυͷϦϑΝϨϯεΛࢀরͰ͖Δ URL ͕ ग़ྗ͞ΕΔΑ͏ʹͳΔ Development Production URL

    ΛΫϦοΫͯ͠ϦϯϑΝϨϯεͱͯ͠ܝࡌ͞Ε͍ͯΔ ՕॴͰৄࡉ৘ใΛ֬ೝͰ͖Δ
  7. 3.4 Ͱ͸ίϯύΠϧ͕શମతʹ 44% ଎͘ͳ͍ͬͯΔ • Elk Λ࢖ͬͨϕϯνϚʔ Ϋ݁Ռ 
 https://github.com/elk-zone/elk

    • ܭଌ಺༰: 
 SFC ղੳ ʙ JS ίʔυ & ιʔεϚοϓੜ੒·ͰΛ ܭଌ https://github.com/vuejs/core/pull/9674
  8. ύʔαʔΛ2ഒߴ଎Խͨ͠ • ύʔαʔ͸ϑϧεΫϥον͔Βॻ͖௚͠ • 3.4 Ҏલ 
 ࠶ؼԼ߱ߏจղੳ (Recursive Descent

    Parsing) + ਖ਼نදݱ • 3.4 Ҏ߱ 
 htmlparser2 ͔ΒϑΥʔΫͨ͠༗ݶΦʔτϚτϯΛ ࢖ͬͨτʔΫφΠβʔ ςϯϓϨʔτจࣈྻεΩϟϯΛઌಡΈͱ࠷খݶͷόοΫτ ϥοΫʹΑΓ1ԟ෮ͰॲཧͰ͖ΔΑ͏ʹͨ͠ https://github.com/vuejs/core/blob/main/packages/compiler-core/src/tokenizer.ts
  9. ίʔυੜ੒΋40%ۙ͘଎ͨ͘͠ • ιʔεϚοϓͰඞཁʹͳΔҐஔ৘ใ (colum / row) ͷܭࢉΛ࠷దԽ • Vue ίϯύΠϥ͸ίʔυੜ੒(CodeGen)Ͱ͸

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

    ಺Ͱ͸ɺҾ਺ ͷνΣοΫ΍ϚοϐϯάͷόϦσʔγϣϯΛ࣮ߦ͍ͯ͠Δ • ͦΕΒ͸ Vue ίϯύΠϥʹͱͬͯΦʔόʔϔουͳͷͰɺ addMapping Λݺ͹ͣʹ಺෦APIΛݺͼग़͢͜ͱͰճආ
  11. • VueίϯύΠϥ͸ SFC ʹରͯ͠ύʔεΛ2ճ࣮ߦ͍ͯ͠ Δ • 1ճ໨: SFC ຊମ 


    SFC ͷ templateɺscriptɺstyle ͳͲΛநग़ • 2ճ໨: SFC ςϯϓϨʔτ 
 ࠷ॳͷύʔεͰநग़͞Εͨ SFCϒϩοΫ template Λ ύʔε͢Δ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠
  12. • 2 ճ໨ͷ SFCςϯϓϨʔτͷύʔεͰੜ੒͞ΕΔιʔεϚο ϓͷҐஔ৘ใ͸ɺ1ճ໨ͷ SFC ϒϩοΫԽͰੜ੒͞Εͨ ιʔεϚοϓͷҐஔ৘ใ͔ΒΦϑηοτʹͳ͍ͬͯͳ͍… • ͭ·ΓɺSFCςϯϓϨʔτ͕

    JS ίʔυʹίϯύΠϧ͞ΕΔ ࡍʹɺ1ճ໨Ͱੜ੒͞ΕͨιʔεϚοϓ৘ใΛݩʹɺSFC ς ϯϓϨʔτͷιʔεϚοϓͷҐஔ৘ใΛܭࢉͯ͠Ϛοϐϯ άͤ͞ͳ͚Ε͹ͳΒͳ͍ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠ ύʔεͰੜ੒͞Εͨ AST ΛݩʹιʔεϚοϓΛϚοϐϯά ͢Δͷ͸ඇৗʹߴίετʂ
  13. • 3.4 Ͱॻ͖௚͞ΕͨύʔαʔʹɺparseMode Λ௥Ճ 
 
 
 
 
 


    
 
 
 • parseMode ʹΑͬͯύʔαʔ͸ɺSFC ςϯϓϨʔτͷύʔεͰ ΋1ճ໨ͷύʔεͰࣄલॲཧ͞Εͨ AST Λ2ճ໨ͷύʔεͰ΋࠶ ར༻͠ɺιʔεϚοϓͷϚοϐϯάॲཧ΋ճආ͢Δ͜ͱͰޮ཰త ʹॲཧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ SFCςϯϓϨʔτͷίϯύΠϧΛޮ཰Խͨ͠
  14. • Case1: 
 computed ͷ஋͕มΘΒͳ͍ͷʹɺͦΕʹґଘ͢Δ computed ͕࣮ߦ͞Εͯ͠·ͬͨΓɺwatch / watchEffect ͷίʔϧόοΫ΍ɺrender

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

    Ϋ͕ෳ਺ճτϦΨʔ͞Εͯ͠·͏ 3.4 Ͱ͸ computed पΓͷ༷ʑͳ໰୊ͳղܾ͞Ε͍ͯΔ
  16. • setInterval Ͱ ref ͳ஋Ͱ͋Δ ms ߋ৽ʹΑͬͯɺsecɺ minɺhour ͷ computed

    Λߋ৽͢ΔσϞ ͜ͷվળʹΑΓύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
  17. • 3.4Ҏલ: • deps.length = 0 Ͱొ࿥͞Ε͍ͯΔ dep ܊Λ࡟আ͍ͯͨ͠ •

    3.4Ҏ߱: • deps ͷొ࿥ঢ়گΛΧ΢ϯλ _depsLength ʹΑͬͯ؅ཧ • _depsLength ͕Ϧηοτ͞ΕΔͷΈɻdeps ಺ͷݹ͍ dep ͸৽͠ ͍ dep ʹΑ্ͬͯॻ͖͍ͯ͠Δ • ্ॻ͖͖͠Ε͍ͯͳ͍ deps ಺ͷݹ͍ dep ܊͸ɺdeps.length = _depsLength ʹΑͬͯτϦϛϯά͞ΕΔ ෆඞཁͳ GC Λආ͚Δ
  18. • DirtyLevels Λಋೖͯ͠ computed ͷ஋͕ԚΕ͍ͯΔ (ߋ৽͞Ε ͍ͯΔ)͔Ͳ͏͔νΣοΫͰ͖ΔΑ͏ʹɺReactiveEffect ʹͦ ͷঢ়ଶΛ࣋ͭΑ͏ʹ͍ͯ͠Δ •

    ϦΞΫςΟϒͳ஋ͷߋ৽࣌ͷτϦΨʔʹ͓͍ͯɺ ReactiveEffect ΛεέδϡʔϥʔͰ࣮ߦͤ͞ΔͨΊʹɺɹ ΩϡʔΠϯά͢Δ͔Ͳ͏͔ DirtyLevels Ͱ൑ผͰ͖ΔΑ͏ʹ͠ ͍ͯΔ • ͞Βʹ ReactiveEffect ʹɺͦΕࣗମ͕࣮ߦ͞Ε͍ͯΔ͔Ͳ͏ ͔൑ผ͢ΔΧ΢ϯλม਺Λ࣋ͭ͜ͱͰɺແବʹΩϡʔΠϯά ͤ͞ͳ͍Α͏ʹ੍ޚ͍ͯ͠Δ ReactiveEffect ͷ࣮ߦΛޮ཰Խ
  19. • ৽͘͠಺෦ API Ͱ͋Δ pauseSchedulingɺ resetScheduling Λ௥Ճ • ͦΕʹΑͬͯɺReactiveEffect ͷ࣮ߦεέδϡʔϦϯ

    άΛఀࢭͨ͠ΓɺϦηοτͯ͠Γ͢Δ͜ͱͰɺεέ δϡʔϦϯάΛࡉ੍͔͘ޚ͍ͯ͠Δ ͖Ίࡉ΍͔ͳεέδϡʔϦϯάௐ੔
  20. • ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳):

    +118%~185% ͪͳΈʹ 3.4 ϦϦʔεޙ΋վળ͸ଓ͍͍ͯΔ https://github.com/vuejs/core/pull/10397
  21. 3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • tscon fi g ͷ

    jsxImportSource ʹ ‘vue’ Λઃఆ 

  22. 3.4 ʹҠߦ͢Δ࣌ʹ JSX (TSX) Λ࢖͏ํ๏ • طଘͷίʔυʹ JSX.Element ͳͲͷάϩʔόϧͳ JSX

    ໊લۭؒʹґଘ͢Δ৔߹͸ɺͦͷίʔυʹ “import ‘vue/jsx’ “ Λ௥Ճ͢Δ https://github.com/intlify/vue-i18n-next/pull/1661
  23. ܕఆٛͷมߋ͸ semver ͷΤοδέʔεʹ౰ͨΔ • Vue ͷόʔδϣχϯά ϙϦγʔ͸ semver ͩ ͕ɺ͍͔ͭ͘ྫ֎͕͋

    Δ • ͜ͷέʔε͸ TypeScript ͷܕఆٛͷ Τοδέʔεʹ౰ͨΔ ͷͰഁյతมߋʹ֘౰ ͠ͳ͍ https://ja.vuejs.org/about/releases#semantic-versioning-edge-cases
  24. app.con fi g.unwrapInjectedRef ͱ͸Կʁ • 3.2 ҎલͰ Composition API Λ࢖ͬͯ

    Provide / Inject ͨ͠ ࣌ɺςϯϓϨʔτͰ `.value` ͕ͳ͍ͱಈ͔ͳ͍໰୊͕͋ͬͨ • ͦͷղܾҊͱͯ͠ΦϓγϣϯϑϥάͰճආͰ͖ΔҰ࣌తʹ ఏڙ͞ΕͨιϦϡʔγϣϯ https://github.com/vuejs/core/issues/4196
  25. • 3.3 Ͱఏڙ͞Εɺ໰୊ ΋मਖ਼͞ΕͨͨΊɺͦ Εͱಉ࣌ʹ deprecated ѻ͍ • ͳͷͰެࣜυΩϡϝϯ τʹ΋ࡌΒͳ͔ͬͨ

    • ϦϦʔεͷஈ֊Λܦ ͯ 3.4 Ͱ࡟আʹͳͬͨ https://github.com/vuejs/core/commit/561e210157874b216efc1c17be701a6a81c4383b ୹໋ʹऴΘͬͨݬͷΦϓγϣϯ
  26. vnode ϓϦϑΟΫεΑΔΠϕϯτϦεφʔͱ͸Կʁ • Vue Ͱ͸ v-on Ͱ Virtual DOM ϨΠϠʔͷϥΠϑ

    αΠΫϧΠϕϯτΛ Hook Ͱ͖ΔΠϕϯτϋ ϯυϥʔΛ࢖͏͜ͱ͕ Ͱ͖Δ
  27. ࠓճมߋର৅ͱͳΔ VNode ϥΠϑαΠΫϧΠϕϯτ • vnode-before-mount • vnode-mounted • vnode-before-update •

    vnode-updated • vnode-before-unmount • vnode-unmounted runtime-core.d.ts Ͱఆٛ͞Ε͍ͯΔܕఆٛͷHook
  28. 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
  29. 3.4 Ҏ߱ v-is ͸׬શʹഇࢭ • 3.3 Ͱ v-is σΟϨΫςΟϒ͔Β ‘vue:’

    ϓϨϑΟοΫε෇͖ Ͱ Vue ίϯϙʔωϯτΛ is ଐੑʹ࢖༻͢ΔΑ͏มߋ • is ଐੑʹ౷߹͞Εͨ͜ͱʹΑΓ is ଐੑͱ v-is Λ࢖͍෼͚ Δೝ஌ෛՙ͕ݮͬͨ
  30. Vue 3.4 • Vue 3.4 ͰϦϦʔε͞Εͨػೳͱվળɺͦͯ͠ഇࢭ ػೳʹ͍ͭͯ࿩ͨ͠ • v-bind লུه๏ɺde

    fi neModel ਖ਼ࣜαϙʔτ͸Ξϓ Ϧͷ։ൃੜ࢈ੑΛߴΊͯ͘Δ • ϋΠυϨʔγϣϯϛεϚον৘ใͷվળ΍Τϥʔ ίʔυϦϑΝϨϯεͷఏڙ͸ɺσόοάΛॿ͚ͯ͘ ΕΔ
  31. Vue 3.4 • 3.4 Ͱ͸͍͔ͭ͘ػೳ͕࡟আ͞ΕΔ • ࡟আ͞ΕΔػೳ͸ɺجຊ 3.3 Ͱ࣮૷͞Ε͓ͯΓɺ ࢖͍ͬͯΔ৔߹͸ɺܯࠂΛग़ྗ͍ͯ͠Δɻ

    
 ·ͨɺ࢖͍͍ͨ৔߹͸୅ସํ๏΋ఏڙ͍ͯ͠Δ • ͳͷͰɺ3.4 ʹҠߦ͢Δࡍ͸͍͖ͳΓ 3.4 ʹΞοϓ άϨʔυ͢ΔͷͰ͸ͳ͘ɺ3.3 Λհͯ͠ϚΠάϨʔ γϣϯ͓ͯ͘͠ͱεϜʔζʹ 3.4 ʹҠߦ͠΍͘͢ ͳ͍ͬͯΔ