Tweet
Tweet

Slide 1

Slide 1 text

フロントスペシャリスト達が語る最新 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

Slide 2

Slide 2 text

Vue3 "One Piece" が 2020/09/19に リリースされました フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 2

Slide 3

Slide 3 text

Vue3 使ってみた感じ どうでしたか ？ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 3

Slide 4

Slide 4 text

iCAREのフロントエンド 開発では @vue/composition-api を使っています フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 4

Slide 5

Slide 5 text

Focus => Vue3のBreaking Changes フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 5

Slide 6

Slide 6 text

Tsuyoshi Hirosawa @watsuyo_2 Front-End Engineer フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 6

Slide 7

Slide 7 text

もくじ . Vue3 とは？ . Breaking Changes とは？ . どんなことが変わった？ i. filter ii. v-model iii. v-for . Vue3 2つの実験的新機能 i. ii. <style vars> フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 7

Slide 8

Slide 8 text

Vue3 とは？ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

今後の動向についてはRFCを参照 https://github.com/vuejs/rfcs フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 10

Slide 11

Slide 11 text

Breaking Changes とは？ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 11

Slide 12

Slide 12 text

Breaking Changes とは？ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 12

Slide 13

Slide 13 text

どんなことが変わった... ？ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 13

Slide 14

Slide 14 text

どんなことが変わった... ？ 詳細: https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 14

Slide 15

Slide 15 text

filterの廃⽌ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 15

Slide 16

Slide 16 text

Vue2までの filter テキストフォーマット等を 統⼀する時に使⽤ グローバル関数的な役割 デメリット 学習コストがかかる IDEサポートの複雑さ フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 16

Slide 17

Slide 17 text

Vue3の代替案 filter フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

v-model フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 19

Slide 20

Slide 20 text

Vue2までの v-model ⼦コンポーネントのinputタグから @input="$emit('update:inputFirst Name', $event.target.value)" のような形で name を受け取れ る。 しかし、⼀つだけ。 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

templateで使⽤するv-for フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Vue3 2つの実験的新機能 フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 25

Slide 26

Slide 26 text

フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

参考資料 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

Slide 31

Slide 31 text

内容をZennに貼り付けて公開 しました サポートする ボタンからサポート お待ちしております フロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15 2020/11/18 31