Vue Composition APIとReact HooksとSvelteの違い

React Hooksとの比較

• Composition APIで関数ベースでロジックを記述できるようになる
• ロジックを合成できるという書き味は、React Hooksと同等であろう
• ただし、大きな違いもいくつかある
• まず`setup()`は、本当に1度しか呼ばれない
• これはつまり
  • より直感的にJavaScriptを記述できる
  • 呼び出し順序も、条件分岐も気にしなくてよい
  • 呼ばれる回数が減るのでGCにも優しい
  • `useCallback()`を使ったインラインハンドラーの最適化などが不要
  • `useEffect()`や`useMemo()`に正しい依存変数を渡し忘れることもない
• 確かにHooksから着想を得たところはあるが、Vueの目指すべきものとは違う

Svelteとの比較

• 物は違えど非常によく似たコンセプトである
• Svelteはコンパイラーを使うため、記述するべきコードはより簡素になる
• Vueでも同じことはもちろんできる（Babelのプラグインでも）が、やらない理由がある
• それは、あくまでスタンダードなJavaScriptで記述するというところ
• Vueで書いた`script`内のコードは、ファイルに切り出してもES Modulesとして動作する
  • Svelteはそうはいかない
• コンパイラーベースのアプローチを取らない理由は、
  • そもそもビルドせずに利用できるプログレッシブなフレームワークだから
  • Svelteの魔法のシンタックスは、コンポーネントの外では動かない（Storeを自作しなければならない）
  • 関数内で定義した変数は、リアクティブにならない
  • TypeScriptのサポートが大変
• そういうわけで、コンパイラーを使うのはVueの目指すところではない

まとめ

どれがベスト！というわけではないし、好きなもん使ったらええやんって思うけど、三者三様でおもしろいな〜と。

PreactにこのComposition APIを入れたいっていうPRもだいぶ前から立ってるけど、どうなることやら。

Composition api by porfirioribeiro · Pull Request #1923 · preactjs/preact · GitHub