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
230
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
520
OSS の変遷を振り返る
watsuyo_2
1
170
Notion RSS Readerを OSSとして公開した話
watsuyo_2
2
1.8k
Notion RSS Reader
watsuyo_2
0
800
iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション
watsuyo_2
1
6.4k
iCARE と Vue.js と コンポーネント設計 と デザインシステムの話
watsuyo_2
1
600
Vue Composition APIのコードを見やすくする
watsuyo_2
1
300
Other Decks in Technology
See All in Technology
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.1k
PHPでResult型やってみよう
higaki_program
0
180
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.4k
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
110
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
220
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
TypeScript 上達の道
ysknsid25
4
460
TROCCO今昔
gtnao
0
210
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
110
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Become a Pro
speakerdeck
PRO
29
5.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Thoughts on Productivity
jonyablonski
69
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Side Projects
sachag
455
43k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Pragmatic Product Professional
lauravandoore
35
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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