2020/04/17 に公開2393 views
@spring_raining と @potato4d が、 Vue 3 の render function についてのアップデート、TypeScript と TSX、Babelに依存しない Vue.js 開発について語りました。
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
hfunction(チュートリアル上ではcreateElementfunction)が、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と同じになった
- もともと Vue 2 では、propsは第2引数のoption中の
- React/Preact:
React.createElemet(component, props, ...children)- 第2引数にpropsを与える点は同じだが、Vueは
slotsやemitなどVue独自の機能が自動的に渡される
- 第2引数にpropsを与える点は同じだが、Vueは
- HyperappもVue APIと同じ？
Vue/React資産の共通化について
- Vue/Reactの内部のアーキテクチャは違うとはいえ、Render functionのAPIを共通化する道筋が見えた
- potato4dの提案したブリッジを何らかのライブラリとして出せば、React資産が使えて流行るかも？
- 各フレームワークのAPI/Lifecycleに依存しないコンポーネントであれば可能そう
- どんな用途で使えそう？
- コンポーネントのエンドポイント提案するブリッジを使って共通化して、内部はWeb Componentsを使う？