🧊

Vue Composition APIとReact HooksとSvelteの違い

について、Vue Composition APIのDocsに記載があったので、自分用にメモ。

Composition API RFC | Vue Composition API

このRFCが出たのは2019年の7月なので、ぜんっぜん目新しい情報はないです。

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はそうはいかない
  • コンパイラーベースのアプローチを取らない理由は、
  • そういうわけで、コンパイラーを使うのはVueの目指すところではない

まとめ

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

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

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