Vue Composition API とSvelteの比較

Svelteとの比較

非常に異なるルートを取りますが、Composition APIとSvelte 3のコンパイラベースのアプローチは、実際には概念的にかなり共通しています。並べて例を示します。

Vue

<script>
import { ref, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    watch(() => console.log(count.value))

    onMounted(() => console.log('mounted!'))

    return {
      count,
      increment
    }
  }
}
</script>

Svelte

<script>
import { onMount } from 'svelte'

let count = 0

function increment() {
  count++
}

$: console.log(count)

onMount(() => console.log('mounted!'))
</script>

Svelteコードは、コンパイル時に次のことを行うため、より簡潔に見えます。

scriptタグブロック全体（importステートメントを除く）を、（1回だけ実行されるのではなく）各コンポーネントインスタンスに対して呼び出される関数に暗黙的にラップします。

可変変異に対する反応性を暗黙的に登録します

スコープ内のすべての変数を暗黙的にレンダリングコンテキストに公開します

$ステートメントを再実行コードにコンパイルします

技術的には、Vueでも同じことができます（そして、ユーザーランドBabelプラグインを介して可能です）。行っていない主な理由は、標準のJavaScriptとの整合性です。 Vueファイルのscriptブロックからコードを抽出する場合、標準のESモジュールとまったく同じように動作するようにします。一方、Svelte scriptブロック内のコードは、技術的にはもはや標準JavaScriptではありません。このコンパイラベースのアプローチには、多くの問題があります。

コードはコンパイルあり/なしで動作が異なります。プログレッシブフレームワークとして、多くのVueユーザーはビルドセットアップなしで使用したい、必要な、使用する必要があるため、コンパイルされたバージョンをデフォルトにできません。

一方、Svelteは自身をコンパイラとして位置付け、ビルドステップでのみ使用できます。これは、両方のフレームワークが意識的に行っているトレードオフです。

※ vueはテンプレート構文(.vueファイル)を使用しない場合コンパイル無しで使用できます。

コードの内部/外部コンポーネントの動作は異なります。 Svelteコンポーネントから標準のJavaScriptファイルにロジックを抽出しようとすると、魔法の簡潔な構文が失われ、より冗長な低レベルAPIにフォールバック(後退)する必要があります。

Svelteの反応性コンパイルは、最上位変数に対してのみ機能します。関数内で宣言された変数には影響しないため、コンポーネント内で宣言された関数に反応状態をカプセル化することはできません。

これにより、関数を使用したコード編成に重要な制約が課せられます。これは、このRFCで実証したように、大きなコンポーネントを保守可能にするために重要です。

RFCとは？

Request for Comments(リクエスト for コメント)

コメント欄のこと。

非標準のセマンティクス(意味合い)により、TypeScriptとの統合が問題になります。

これは、Svelte 3が悪いアイデアであることを意味するものではありません。実際、これは非常に革新的なアプローチであり、Richの仕事を高く評価しています。しかし、Vueの設計上の制約と目標に基づいて、さまざまなトレードオフを行う必要があります。

参考

https://vue-composition-api-rfc.netlify.com/#comparison-with-react-hooks

Vue Composition API とSvelteの比較

Svelte, Vue.js

Svelteとの比較

Vue

Svelte

参考