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.js 3
Search
kazupon
February 01, 2020
Programming
38
20k
まもなくやってくる Vue.js 3
kazupon
February 01, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
480
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
190
カクヨムAndroidアプリのリブート
numeroanddev
0
430
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
770
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
Gleamという選択肢
comamoca
6
740
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
540
無関心の谷
kanayannet
0
180
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
Benchmark
sysong
0
220
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
27k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Designing Experiences People Love
moore
142
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Unsuck your backbone
ammeep
671
58k
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Writing Fast Ruby
sferik
628
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
·ͳͬͯ͘͘Δ Vue.js 3 PWA night conference 2020 2020.02.01 @kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
͡Ίʹ
201610݄
Vue.js 2.0 ϦϦʔε https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering?slide=10
ͦΕ͔Β 3༨ΓΛྺͯ
2020 Q1
Vue.js 3.0 ϦϦʔε༧ఆ
ݱࡏ
RFCͰ࠷ऴ༷ΛݻΊͭͭணʑͱ։ൃத https://github.com/vuejs/rfcs
vue-next-webpack-preview https://github.com/vuejs/vue-next-webpack-preview
vue-cli-plugin-vue-next https://github.com/vuejs/vue-cli-plugin-vue-next
ެࣜϓϥάΠϯ/πʔϧ܊ରԠத • Vue Router • Vuex • Vue DevTools •
Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
ϝδϟʔϦϦʔεͳͷͰ ৽ػೳ & มߋ ͨ͘͞Μ͋Γ·͢
ࠓ͢͜ͱ
ࠓ͢͜ͱ • Vue.js 3 ͰೖΔ৽ػೳʹ͍ͭͯ • ίϯϙδγϣϯ API • ϑϥάϝϯτ
• ϙʔλϧ • αεϖϯε
ࠓ͢͜ͱ • ͋Δ Vue.js 2.x ͔Βͷมߋͷத͔Β… • ୯ҰϑΝΠϧίϯϙʔωϯτ • εϩοτ
• ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI
ࠓ͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ •
Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ
⚠ ҙࣄ߲ ⚠ • ࠓ͢༰ɺൃද࣌Ͱ Vue.js ຊମʹ࣮͞Ε͍ͯΔͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta
όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰมΘΔՄೳੑ͋Γ
৽ػೳ ʹ͍ͭͯ
ίϯϙδγϣϯAPI Composition API
ίϯϙδγϣϯAPIͱʁ • ؔϕʔεͰఏڙ͞ΕΔ API ܊ https://vue-composition-api-rfc.netlify.com/api.html ఏڙ͞ΕΔ API ͨͪ
ੜ·Εͨഎܠ • Vue.js Ͱେن։ൃͰ͖Δ͕͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ •
ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
ίϯϙδγϣϯAPIΛ͏͜ͱͰ… • ίϯϙʔωϯτ ͷϩδοΫΛࣗ ༝ߴ͘Έ߹ Θ࣮ͤ͢Δ͜ ͱ͕Ͱ͖Δ
େن։ൃ͕ΑΓշదʹʂ • ίϯϙʔωϯτ ͷϩδοΫߏ ͕៉ྷʹͳΓɺ ςετ͢͠ ͘ͳΔʂ
ͲΜͳͷ͔ ݟ͍͖ͯ·͠ΐ͏ʂ
ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ༰Λఏڙ͢Δͷʹྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ •
ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷೖ)
ϦΞΫςΟϒ ঢ়ଶͷૢ࡞
ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly •
ref • isRef • toRefs
৽͍֓͠೦ Ref ͕ಋೖ͞ΕΔ • ϦΞΫςΟϒͳঢ়ଶΛϥοϓͨ͠ࢀরΦ ϒδΣΫτ https://vue-composition-api-rfc.netlify.com/ ʹܝࡌ͞Ε͍ͯΔਤΑΓ
ίʔυྫ
ίϯϙʔωϯτ ͷ ৽ΤϯτϦϙΠϯτ
setup • ίϯϙδγϣϯ APIΛͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮ • return ͨ͠ͷ ͕ςϯϓϨʔτ
ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ
render ؔ / JSX ༻Ͱ͖Δ
Ҿʹ props ͱ context ͕͞ΕΔ • props: ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ •
context: ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬ • emit: Vue 2.x ͷ $emit ʹ૬ • slots: Vue 2.x ͷ $slots ʹ૬
props ͱ context ͷ༻ྫ
this ίϯϙʔωϯτͷΠϯελϯεͰͳ͍ • ίϯϙδγϣϯ API Ͱ setup Ͱίϯϙʔ ωϯτΛ࣮͢Δ߹ɺthis ͏
Θͳ͍
ϥΠϑαΠΫϧ ϑοΫ
Vue 2.x ͱͷϚοϐϯά beforeCreate created beforeMount mounted updated beforeDestroy destroyed
errorCaptured setup setup onBeforeMount onMounted onUpdated onBeforeUnmount onUnmounted onErrorCaptured (ࠨ: Vue 2.xɺӈ: Vue 3 Ҏ߱)
৽͍͠ϥΠϑαΠΫϧϑοΫͷ༻ྫ
σόοά͚ʹ৽ϑοΫ • ϨϯμϦϯάॲཧʹରͯ͠ҎԼͷϑοΫ͕ ఏڙ͞ΕΔ • onRenderTracked • onRenderTriggered
DI (Dependency Injection)
provide / inject • Vue 2.x Ͱఏ ڙ͞Ε͍ͯͨ DI Λ
Vue 3.0 Ͱಉ͡Α͏ ʹར༻Ͱ͖Δ
ϦΞΫςΟϒͳঢ়ଶڞ༗Ͱ͖Δ • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ ΫτΛ͢͜ͱͰڞ༗Ͱ͖Δ
ϓϥάΠϯ DI Ͱ࣮Λਪ • Vue 3.0 Ҏ߱ͰɺϓϥάΠϯ։ൃ provide / inject
ΛͬͨύλʔϯΛਪ • Vue 2.x ·Ͱͷ • $xxx Ͱґଘ͕ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ͍͠ • ϓϥάΠϯͰ࣮͞Εͨίϯϙʔωϯτɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍
DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτͰ provide / inject Ͱ
DI ͢ΕศརʹͳΔ͜ͱ͋Δ (͝ར༻ܭըతʹ)
طଘ API ͱͷ ซ༻ʹ͍ͭͯ
ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ
API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup Ͱ this.xxx ෆՄ • Φϓγϣϯ API ଆ͔Β ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ
ίϯϙδγϣϯ API σϝϦοτ
ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷͷ͔ɺͦΕͱ ref
Ͱϥοϓ͞Εͯͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹมͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ
ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ͍͢ • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮&ߏ ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ ͍͍ͯ͘
eslint-plugin-vue ͰϧʔϧΛఏڙ͢Δ • ΧΦεʹͳΒͳ͍ͨΊʹίϯϙδγϣϯ API ͚ͷϧʔϧΛఏڙ͢Δ༧ఆ https://github.com/vuejs/eslint-plugin-vue/issues/1035
ϑϥάϝϯτ Fragments
ϑϥάϝϯτͱ • ίϯϙʔωϯτ͕ෳͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ •
Vue 3.0 Ҏ߱σϑΥϧ τͰαϙʔτ fragment fragment fragment
Root ཁૉͰϥοϓ͢Δ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ
HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
ͷίʔυྫ ෆਖ਼ͳ HTML … ϨϯμϦϯά
ϑϥάϝϯτΛར༻͢Δͱ… ϨϯμϦϯά ਖ਼͍͠HTML!
༨ஊ: Vue 2.x ͰؔܕίϯϙʔωϯτͰճආͰ͖ͨ
ϙʔλϧ Portals
ϙʔλϧͱ • ίϯϙʔωϯτͷ͋ ΔίϯςϯπΛVueͷ ඳըର֎ͷཁૉʹඳ ը͢ΔͨΊͷΈ • WICG ͷ Portals
ͱ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
Ϣʔεέʔε • ελΠϧϨΠΞτΛ Hack ͦ͠͏ͳ߹ z-indexɺposition: absolute ۦͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ •
ϖʔδ্ͷΟδΣοτ ֎෦ͷԿΒ͔ͷΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δͷ
Vue 2.x ͰϙʔλϧΛ༻͢Δʹ ... • ϓϥάΠϯ vue-portal Λ͏ඞཁ͕͋ͬͨ
https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱ͰɺԾ DOM ϨϕϧͰϙʔ λϧ͕࣮͞Ε͍ͯΔ
͍ํ • ରͱͳΔίϯςϯπΛ Portal ίϯϙʔ ωϯτͰϥοϓ • target ϓϩύςΟͰରઌͷཁૉΛࢦఆ ͢Δ͚ͩ
͍ํ: ίʔυྫ
target ϓϩύςΟ
Portal ͱ͍͏໊લมΘΔ͔… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ༷٧ΊΔͨΊɺݱࡏ RFC
Ͱٞ த https://github.com/vuejs/rfcs/pull/112
αεϖϯε Suspense
αεϖϯεͱ • ࡶʹ͍͏ͱɺίϯϙʔωϯτͷඇಉظͳ ඳըॲཧΛ͍͍ײ͡ʹͬͯ͘ΕΔ Έ
Ϣʔεέʔε • ྫ: Spinner Λͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳͰͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ
ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը
͍ํ
͍ํ
ͪͳΈʹ ૉʹ࣮͢Δͱ
None
DEMO ଟஈඇಉظίϯςϯπͷಡΈࠐΈ
αεϖϯε͑Δʁ • alpha ൛Ͱೖ͍ͬͯΔ͕ɺϏϧυΦϓ γϣϯͰػೳ on/off Ͱ͖ΔΑ͏ʹͳͬͯ ͍Δ • αʔόʔαΠυϨϯμϦϯάͷ࣮ঢ়گ
࣍ୈ
Vue 2.x ͔Βͷ มߋʹ͍ͭͯ
୯ҰϑΝΠϧίϯϙʔωϯτ Single File Components
είʔϓ͖ CSS ͷ༷มߋ • ݱࡏ RFC Ͱ࠷ऴϑΟʔυόοΫडத https://github.com/vuejs/rfcs/pull/119
Vue 3.0 Ҏ߱ͷ৽༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ •
طଘͷه๏ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠ ޓੑΛαϙʔτ ༧ఆ
::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector) Scoped ͞Εͨࢠίϯϙʔωϯτʹελ ΠϧΛద༻͍ͨ͠߹ʹ༻ •
>>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(:Χοί ͕ແ͍ํ)ഇࢭ
::v-deep() ίʔυྫ @vue/sfc-compiler + bundler
::v-slotted() ٖࣅΫϥε • ͔Βࢠʹ͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ
πʹ໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
::v-slotted() ίʔυྫ @vue/sfc-compiler + bundler
::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ <style scoped> ͰఆٛͰ͖Δ • ैདྷ SFC
ίϯϙʔωϯτʹ <style scoped> ͱผͷ <style> Ͱఆ͍ٛͯͨ͠
::v-global() ίʔυྫ @vue/sfc-compiler + bundler
εϩοτ Slots
Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳআ͞ ΕΔ • slot
ଐੑΛ໊ͬͨલ͖εϩοτ • slot-sope ଐੑΛͬͨείʔϓ͖ε ϩοτ
ϑΟϧλ Filters
ϑΟϧλআ • ύΠϓԋࢉࢠ ( | ) ΛͬͨϑΟϧλɺ ͍ͭʹ Vue 3.0
Ͱআ͞ΕΔ • Vue 2.x ޓϏϧυ൛Ͱܯࠂग़ྗ͠ɺػ ೳαϙʔτ͞ΕΔ(༧ఆ)
ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ มͯ͠͏
• Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠͏ • @vue/compiler-core Ͱੜ͞Εͨ render ؔ ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ͏
Πϕϯτ Events
Event Emitter ܥ API ͷআ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API আ͞ΕΔ༧ఆ
• $on • $off • $once • Vue 2.x ޓϏϧυ൛Ͱܯࠂग़ྗ͠ɺػೳ αϙʔτ͞ΕΔ(༧ఆ)
ସखஈ • mitt Λ͏ https://github.com/developit/mitt
άϩʔόϧ API Global API
I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ͕͋ͬͨ •
୯ମςετ͠ʹ͍͘ ঢ়ଶͷϦηοτ͘͠ϦηοτͰ͖ͳ͍ (Vue.config.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳͷ Vue ΠϯελϯεؒͰঢ়ଶΛ ߹ͤ͞Δͷ͕͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍͋Δ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
createApp ͰΠϯελϯεΛੜ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
productionTip Vue 3.0 Ͱআ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
͜ͷล ΄΅ͦͷ··
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
Vue 3.0 Ͱ໊લΛมߋ (ओͳ༻్ TS Ͱ ܕ͚Λαϙʔτ͢ΔͨΊ)
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
ΤϯτϦϙΠϯτϨϕϧͷ provide ఏڙ͢Δ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
DOM ͷ Ϛϯτํ๏ಉ͡
·ͱΊ
• ίϯϙδγϣϯ API ʹΑΓେن։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ͷදݱྗ͕ߴ·Γ·͢ • Vue
2.x ͔Βͷ breaking change తͳมߋ͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏ (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ
࠷ޙʹ
Vue Fes Japan 2020 • ࠓ 2020 Γ·͢ʂ • 11݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ