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
240
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
530
OSS の変遷を振り返る
watsuyo_2
1
170
Notion RSS Readerを OSSとして公開した話
watsuyo_2
2
1.8k
Notion RSS Reader
watsuyo_2
0
820
iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション
watsuyo_2
1
6.5k
iCARE と Vue.js と コンポーネント設計 と デザインシステムの話
watsuyo_2
1
610
Vue Composition APIのコードを見やすくする
watsuyo_2
1
310
Other Decks in Technology
See All in Technology
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
Wantedlyの開発組織における生成AIの浸透プロジェクトについて
kotominaga
2
130
データ分析エージェント Socrates の育て方
na0
8
3.1k
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
230
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ:はじめてのローカルLLM
stanaka26
0
110
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
2.7k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
170
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
250
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
3
950
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
820
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
628
62k
Scaling GitHub
holman
463
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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