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
210
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
480
OSS の変遷を振り返る
watsuyo_2
1
160
Notion RSS Readerを OSSとして公開した話
watsuyo_2
2
1.7k
Notion RSS Reader
watsuyo_2
0
770
iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション
watsuyo_2
1
6.3k
iCARE と Vue.js と コンポーネント設計 と デザインシステムの話
watsuyo_2
1
580
Vue Composition APIのコードを見やすくする
watsuyo_2
1
300
Other Decks in Technology
See All in Technology
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
120
C++26アップデート 2025-03
faithandbrave
0
1.1k
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
2
520
グループ ポリシー再確認 (2)
murachiakira
0
180
3D生成AIのための画像生成
kosukeito
2
540
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
690
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
220
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
130
Oracle Cloud Infrastructure:2025年4月度サービス・アップデート
oracle4engineer
PRO
0
230
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
210
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
300
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
840
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
540
Building Adaptive Systems
keathley
41
2.5k
Site-Speed That Sticks
csswizardry
6
510
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Designing Experiences People Love
moore
142
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