Vue 3 Study

• UIT で定期的に実施している Vue.js 勉強会
  • 前回の Podcast: https://uit-inside.linecorp.com/episode/36

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

• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md
• h function(チュートリアル上では createElement function)が、Render functionの引数として与えられるのではなく直接 Vue のグローバルAPIとして利用できるようになる
• そもそもRender functionとは、Vueにおいて通常ではテンプレートで実現しているコンポーネント要素の宣言を、JavaScript上で定義するための関数
  • Vueではテンプレートを使ってもRender functionを使っても、内部的にはVNodeと呼ばれる仮想的なDOM要素をもって管理されている
• このAPIの変更を利用して、Potato4dがTSXからVue 3のRender functionを呼び出すことができないか？ということを試した
  • https://github.com/potato4d/vue-next-tsx-only-tsc
  • 結果一部専用のコードが必要となったものの、ほぼ追加コードなしで TSX の動作を実現できた

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は slots や emit などVue独自の機能が自動的に渡される
• HyperappもVue APIと同じ？

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

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

Refs

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