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
19k
まもなくやってくる Vue.js 3
kazupon
February 01, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.3k
Vue 3.4
kazupon
13
4.3k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.2k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
970
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
520
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
CSC307 Lecture 07
javiergs
PRO
0
220
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Trial
cairolibrary720
1
130
生成AIをkintoneに連携してみた
hideg
0
230
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Jetpack for KMP
fornewid
1
290
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
A designer walks into a library…
pauljervisheath
201
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Docker and Python
trallard
37
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Designing for humans not robots
tammielis
247
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Code Reviewing Like a Champion
maltzj
517
39k
What's new in Ruby 2.0
geeforr
338
31k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ