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
Vue3 Breaking Changes
Search
watsuyo_2
November 18, 2020
Technology
1
220
Vue3 Breaking Changes
watsuyo_2
November 18, 2020
Tweet
Share
More Decks by watsuyo_2
See All by watsuyo_2
Migrating to Vue 2.7 for safe and improve development efficiency / 安全に開発効率を上げるための Vue_2.7 移行
watsuyo_2
0
500
OSS の変遷を振り返る
watsuyo_2
1
160
Notion RSS Readerを OSSとして公開した話
watsuyo_2
2
1.8k
Notion RSS Reader
watsuyo_2
0
780
iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション
watsuyo_2
1
6.4k
iCARE と Vue.js と コンポーネント設計 と デザインシステムの話
watsuyo_2
1
580
Vue Composition APIのコードを見やすくする
watsuyo_2
1
300
Other Decks in Technology
See All in Technology
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
450
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
Swiftは最高だよの話
yuukiw00w
2
290
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
技術書典18結果報告
mutsumix
2
180
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
180
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
230
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GitHub's CSS Performance
jonrohan
1031
460k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Designing Experiences People Love
moore
142
24k
Optimizing for Happiness
mojombo
378
70k
Designing for humans not robots
tammielis
253
25k
Six Lessons from altMBA
skipperchong
28
3.8k
Site-Speed That Sticks
csswizardry
7
590
How to Think Like a Performance Engineer
csswizardry
23
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Writing Fast Ruby
sferik
628
61k
Transcript
フロントスペシャリスト達が語る最新 Vue/React動向 iCARE Dev Meetup #15 Vue3 Breaking Changes 2020/11/18
Tsuyoshi Hirosawa @watsuyo_2 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 1
Vue3 "One Piece" が 2020/09/19に リリースされました フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup
#15 2020/11/18 2
Vue3 使ってみた感じ どうでしたか ? フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18
3
iCAREのフロントエンド 開発では @vue/composition-api を使っています フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18
4
Focus => Vue3のBreaking Changes フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18
5
Tsuyoshi Hirosawa @watsuyo_2 Front-End Engineer フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15
2020/11/18 6
もくじ . Vue3 とは? . Breaking Changes とは? . どんなことが変わった?
i. filter ii. v-model iii. v-for . Vue3 2つの実験的新機能 i. <script setup> ii. <style vars> フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 7
Vue3 とは? フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 8
v3.0.0 One Piece https://github.com/vuejs/vue-next/releases/tag/v3.0.0 Vue.jsのメジャーアップデート パフォーマンスの向上 バンドルサイズの縮⼩ ⼤規模開発向けAPI、フレームワークの基盤を強固に Composition APIの導⼊
https://composition-api.vuejs.org/ TypeScript対応 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 9
今後の動向についてはRFCを参照 https://github.com/vuejs/rfcs フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 10
Breaking Changes とは? フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 11
Breaking Changes とは? フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 12
どんなことが変わった... ? フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 13
どんなことが変わった... ? 詳細: https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18
14
filterの廃⽌ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 15
Vue2までの filter テキストフォーマット等を 統⼀する時に使⽤ グローバル関数的な役割 デメリット 学習コストがかかる IDEサポートの複雑さ フロントスペシャリスト達が語る最新Vue/React動向 iCARE
Dev Meetup #15 2020/11/18 16
Vue3の代替案 filter フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 17
Vue3の代替案 filter Vue2同様にインポートして methodに定義 https://github.com/vuejs/rfcs/blob/ma ster/active-rfcs/0015-remove- filters.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev
Meetup #15 2020/11/18 18
v-model フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 19
Vue2までの v-model ⼦コンポーネントのinputタグから @input="$emit('update:inputFirst Name', $event.target.value)" のような形で name を受け取れ る。
しかし、⼀つだけ。 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 20
Vue3の v-model ⼦コンポーネントのinputタグから 複数の変数を受け取れる。 https://github.com/vuejs/rfcs/blob/ma ster/active-rfcs/0011-v-model-api- change.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev
Meetup #15 2020/11/18 21
templateで使⽤するv-for フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 22
Vue2までのtemplateで使⽤す るv-for templateタグで は :key="index" が使えない :key="index" のためのdivタグを ⽣やす必要がある ESLintの
vue/no-v-for-template- key-on-child でも怒られます フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 23
Vue3のtemplateで使⽤する v-for :key="index" をtemplateタグ でも使える Vue2同様の書き⽅をするとエラー になる https://github.com/vuejs/vue- next/issues/1734 フロントスペシャリスト達が語る最新Vue/React動向
iCARE Dev Meetup #15 2020/11/18 24
Vue3 2つの実験的新機能 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 25
<script setup> フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 26
<script setup> composition APIのsetup関数を 簡潔に記述するための記法 <script setup="props, { emit }">
propsやcontextに注⼊されている emitも呼べる https://github.com/vuejs/rfcs/blob/sfc -improvements/active-rfcs/0000-sfc- script-setup.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 27
<style vars> フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 28
<style vars> styleタグで動的変数を扱える記法 https://github.com/vuejs/rfcs/blob/sfc -improvements/active-rfcs/0000-sfc- style-variables.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup
#15 2020/11/18 29
参考資料 Vue RFCs: https://github.com/vuejs/rfcs/ vue-next: https://github.com/vuejs/vue-next フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup
#15 2020/11/18 30
内容をZennに貼り付けて公開 しました サポートする ボタンからサポート お待ちしております フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15
2020/11/18 31