UIT INSIDE

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

  • HANATANI Takuma
  • 緑豆はるさめ
2020/04/17 に公開 1306 views

このエピソードについて

@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秒次へ