ゲスト

• 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

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic