Vue 3

宣言的レンダリングとリアクティビティを中核に、状態変化からDOM更新までをcomponentとして組み立てる

公式ドキュメントはVueの中核をDeclarative RenderingとReactivityの2点として説明しています。templateからJavaScript stateに応じたHTMLを宣言し、stateの変化をVueが追跡して必要なDOM更新へ反映します。vuejs/core自体はTypeScript主体で、runtime・compiler・reactivityを同じ上流リポジトリで開発しています。

出典：[5][1]

SFCとComposition API / Options APIを選び、規模に応じてcomponentの書き方を変えられる

build toolを使うVue projectでは、logic・template・styleを.vueファイルへまとめるSingle-File Componentが推奨されています。API styleはOptions APIとComposition APIの両方が正式にサポートされ、どちらも同じ基盤上で動きます。公式ドキュメントは低complexityやbuild toolなしの用途ではOptions API、full applicationではComposition API + SFCを一般的な推奨として示しています。

vue packageは@vue/compiler-sfcと@vue/server-rendererを含み、TypeScriptをoptional peer dependencyとして扱います。component authoring、SFC compile、SSRを同じpackage familyで接続できる構成です。

出典：[5][3]

既存HTMLへの部分導入からSPA・SSR・SSGまで、同じVue知識を段階的に拡張できる

Vueはincrementally adoptableを設計方針にしており、build stepなしのstandalone script、Web Components、SPA、SSR、SSGなど複数の導入形態を公式に案内しています。server-rendered HTMLの一部分だけをVue化する構成から始め、必要になった時点でroutingやfull-stack frameworkを追加するなど、stack complexityを段階的に上げられます。

SSRではserver上でVue appをHTML stringへrenderし、client側でhydrateしてinteractiveにするAPIを持ちます。SEOやtime-to-contentが重要なapplicationでは、pure SPA以外のrendering方式を同じcomponent modelで選べます。

出典：[6][3]

既存Webへ少しずつ導入したいチームから、TypeScriptでSPA・SSRを組むチームまで幅広く適合する

server-rendered applicationの一部だけをreactive UIへ置き換えたい場合、component単位で段階導入したい場合、TypeScriptとSFCを使って中〜大規模SPAを構築したい場合に向きます。Options APIで学習コストを抑えた導入から、Composition APIでlogic reuseや複雑なstateを整理する構成へ移れるため、project規模に合わせて同じframework内で設計を変えられます。

vuejs/coreはVue 3本体。既存のvuejs/vue（Vue 2）とは別projectとして扱い、Vue 2 EOL後の移行を前提にする

Vue 3公式ドキュメントはVue 2のsupportが2023年12月31日に終了したと明記しています。OSS探訪に既存登録されているvuejs/vueはVue 2系であり、今回のvuejs/coreはVue 3の現行coreです。既存Vue 2 applicationを更新する場合は、package versionを上げるだけではなく、Vue 3 Migration Guideを前提にbreaking changesと周辺libraryの対応状況を確認する必要があります。

出典：[5][1]

Vue coreだけでfull applicationの全機能が完結するわけではなく、routing・build・SSR frameworkなどは用途に応じて組み合わせる

Vueはprogressive frameworkとして幅広いuse caseを扱いますが、core packageそのものはUI runtime・reactivity・compiler・server rendererが中心です。公式ドキュメントもSPAではclient-side routerやbuild tooling、fullstack/SSRではhigher-level Vue frameworksを組み合わせる構成を案内しています。導入比較では「Vue coreのAPI」と「Vue ecosystem全体のapplication stack」を分けて評価する方が依存範囲を把握しやすくなります。

Options APIとComposition APIはどちらも正式な選択肢ですが、同じcodebaseで無計画にstyleを混在させるとcomponentごとの設計規約が揺れます。teamでSFC、<script setup>、state compositionの方針を決め、migration時には既存componentとの境界を明示する必要があります。

出典：[5][6][3]