ep.32 Vue 3 Study 「RFC を全部読んで理解する Vue 3.0 の進化」 | UIT INSIDE

2020/02/07 に公開3977 views

このエピソードについて

@spring_raining と @NozomuIkuta が、来る Vue 3.0 に向けて、RFC の内容を全て読み込んでみました。

ゲスト

Ikuta nozomu
- ITSC Front-End Engineer

「Vue 3 勉強会」について

LINEのJSerによる社内ミーティングの中で、現在定期的に開催されている
Vue 3 とは
- Vue.jsのメジャーアップデート
- 2020 Q1にリリース予定
- 大きな記法変更などが発生するため、RFCに注目が集まっている

Vue 3.0 RFCs

Global APIの変更
- 0004: Vueの各種APIをNamed exportsにして、tree-shaking可能な関数として切り出し
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0004-global-api-treeshaking.md
- 0009: Vueに対するグローバルなオプション(use mixin component directive)をAppインスタンスに対するオプションに変更
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md
0013: Composition APIの追加
- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md
0008: Render Function APIの変更
- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md
0007: Functional component APIの変更
- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md
<transition> に関する変更
- 0017: rootに<transition>がある時の動作の変更
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0017-transition-as-root.md
- 0018: クラス名の変更
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0018-transition-class-change.md
0010: props定義をoptionalに変更
- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0010-optional-props-declaration.md
Slotに関する変更
- 0001: slot slot-scope 属性ではなく、 v-slot ディレクティブでSlotを定義 (2.6から変更済み)
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
- 0002: # プレフィックスによるslotショートハンド (2.6から変更済み)
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0002-slot-syntax-shorthand.md
- 0006: $scopedSlotsの廃止
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0006-slots-unification.md
Directiveに関する変更
- 0003: 動的なDirective引数の設定に対応 (2.xから変更済み)
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md
- カスタムディレクティブ定義時の各フック関数の名前を変更
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0012-custom-directive-api-change.md
v-model に関する変更
- 0005: .sync 修飾子つきの v-bind を廃止
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
- 0011: カスタムコンポーネント上の v-model のAPIを調整（？）
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md
廃止される機能
- 0014: 修飾子による特定のキーイベントの指定、config.keyCodes
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md
- 0015: フィルター記法
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md
- 0016: inline-template 属性
  - https://github.com/vuejs/rfcs/blob/master/active-rfcs/0016-remove-inline-templates.md

採用について

使用素材・クレジット

BGM&SE