UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. Render Functionの仕様変更
    00:53
  • 2. tsc だけで動かす Vue + TSX
    06:21
  • 3. React と Vue における h 関数の違い
    10:47
  • 4. Vue/Reactでの資産の相互活用の未来
    17:14
  • 5. クロージング
    23:21

ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』

2020/04/17
1176 views
HANATANI Takuma 緑豆はるさめ

@spring_raining と @potato4d が、 Vue 3 の render function についてのアップデート、TypeScript と TSX、Babelに依存しない Vue.js 開発について語りました。

Vue 3 Study

Vue 3で変更されるRender Functionの仕様変更

h functionのAPIの違い

  • Vue: Vue.h(component, option, children)
    • もともと Vue 2 では、propsは第2引数のoption中の props など決められた名前のメンバーとして与える必要があったが、Vue 3ではobject直下に自分が決めた名前のpropsを直接与えられるようになりReact のAPIと同じになった
  • React/Preact: React.createElemet(component, props, ...children)
    • 第2引数にpropsを与える点は同じだが、Vueは slotsemit などVue独自の機能が自動的に渡される
  • HyperappもVue APIと同じ?

Vue/React資産の共通化について

  • Vue/Reactの内部のアーキテクチャは違うとはいえ、Render functionのAPIを共通化する道筋が見えた
  • potato4dの提案したブリッジを何らかのライブラリとして出せば、React資産が使えて流行るかも?
    • 各フレームワークのAPI/Lifecycleに依存しないコンポーネントであれば可能そう
    • どんな用途で使えそう?
    • コンポーネントのエンドポイント提案するブリッジを使って共通化して、内部はWeb Componentsを使う?
10秒前へ 10秒次へ