$30 off During Our Annual Pro Sale. View Details »

細かすぎて伝わらないVue3RFC選手権

 細かすぎて伝わらないVue3RFC選手権

VuejsOsaka#3で発表した内容です。
タイトルに特に意味はないです。

morimorikochan

October 15, 2019
Tweet

More Decks by morimorikochan

Other Decks in Programming

Transcript

  1. • 名前 ◦ morifuji ◦ twitter : @marooon88 • 仕事

    ◦ atma株式会社 ◦ PHP/Nodejs/Vuejs • 趣味 ◦ kotlin→Rust(勉強中) ◦ switchのインディーゲーム ▪ katana zero ▪ The friends of Ringo Ishikawa ▪ moon 自己紹介
  2. 目的 RFCとは? • Request for Comments(リクエスト フォー コメンツ、略称:RFC) • コメント募集の意

    • Vue.jsではrfcsリポジトリにプルリクエストを投げると提出できる
  3. 目的 • Global API Treeshaking By Evan you • Proposal

    for new slots syntax By Evan you • Proposal for dynamic directive arguments By Evan you • Implicit return initial values By sebhochuli • Dispatch & Broadcast API By wspl
  4. 不要なコードをビルドしてサイズを大きくしたくないから • Tree Shaking ◦ 不要なコードを削除する ◦ Webpackのビルドで行われる • Vue2.Xだと、APIを使わない場合でもビルドされる

    ◦ 必要な時だけビルドされるように • 影響を受けるAPI ◦ Vue.nextTick ◦ Vue.observable ◦ Vue.version ◦ Vue.compile (only in full builds) ◦ Vue.set (only in compat builds) ◦ Vue.delete (only in compat builds) Global API Treeshaking By Evan you Vue 2.x Vue 3
  5. Proposal for new slots syntax By Evan you 1. slot-scopeのディレクティブがv-slotに統一

    ◦ slot-scope=”xxxx” → v-slot=”xxxx” 2. v-slotはslotを渡すcomponent自身のみで定義が可能 ◦ fooコンポーネントのv-slotは、fooコンポーネントでのみ定義が可能 RFCのURL:https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md Vue 2.x Vue 3
  6. 1. slot-scopeのディレクティブがv-slotに統一 Propsを受け取る場合も受け取らない場合もSlotはSlot。だから記法を統一し概念も統 一すべき(超意訳) • A slot may or may

    not receive props, but they are all just slots. With this conceptual unification, having slot and slot-scope being two special attributes seems unnecessary, and it would be nice to unify the syntax under a single construct as well. Proposal for new slots syntax By Evan you
  7. Proposal for dynamic directive arguments By Evan you • ディレクティブのkeyの動的変更の記法が簡潔に

    RFCのURL:https://github.com/vuejs/rfcs/blob/dynamic-directive-arguments/active-rfcs/0000-dynamic-directive-arguments.md
  8. Implicit return initial values By sebhochuli • ディレクティブのkeyの動的変更の記法が簡潔に RFCの URL:https://github.com/sebhoc

    huli/rfcs/blob/implicit-return-initial-v alues/active-rfcs/0000-implicit-retur n-initial-values.md Vue 3(Before)
  9. Implicit return initial values By sebhochuli valueで定義された変数は暗黙的に returnしたことにしましょう Vue 3(After)

    RFCの URL:https://github.com/sebhoc huli/rfcs/blob/implicit-return-initial-v alues/active-rfcs/0000-implicit-retur n-initial-values.md
  10. Implicit return initial values By sebhochuli 理由(一部抜粋) • returnが省略された場合はundefinedが返ることはJavascriptの仕様 ◦

    それを変えるにはコンパイルのステップが必要になる • それほどのメリットを感じられない
  11. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン

    ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL:https://github.com/vuejs/rfcs/pull /43/files Vue 3
  12. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン

    ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL:https://github.com/vuejs/rfcs/pull /43/files Rootコンポーネント ItemAコンポーネント ItemB コンポーネント Childコンポーネント $dispatch ex) Childコンポーネントでdispatchした場合
  13. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン

    ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL:https://github.com/vuejs/rfcs/pull /43/files Rootコンポーネント ItemAコンポーネント ItemB コンポーネント Childコンポーネント $broadcast ex) Rootコンポーネントでbroadcastした場合
  14. Dispatch & Broadcast API By wspl 理由(一部抜粋) • すでにVue1で導入されたがVue2で廃止になった歴史がある ◦

    https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced • Vuexなどのライブラリを使うことでdispatch/broadcastの脆弱性なしで実装できる • 開発者で簡単に実装作れる
  15. まとめ • RFCはざっくりしたものでも提出していい ◦ 実現可能性がなくても通るかも? • RFCのフォーマットが仕様の記述方法として綺麗、 ◦ サマリ ◦

    動機・必要性 ◦ 今までとの違い ◦ 詳細仕様 • RFCを出すだけではなくconversation(コメント)で議論することも有益 ◦ 仕様の選択肢をemojiで投票することもある ▪ https://github.com/vuejs/rfcs/pull/4#issuecomment-455928311 ▪ https://github.com/vuejs/rfcs/pull/2#issuecomment-454584258 • Evan youでも仕様が漏れる ◦ 僕が書いた仕様が漏れるのも当たり前