TL;DR
ユーザインタフェースを作るための JavaScript のフレームワーク。標準の HTML、CSS、JavaScript の上に、宣言的でコンポーネントベースのプログラミングモデルを提供する。読み方は「ビュー」。
なぜ必要か
公式ドキュメントでは、Vue を「プログレッシブフレームワーク」と呼んでいる。静的な HTML に少しずつ機能を足す使い方から、SPA、SSR、SSG まで、必要に応じて段階的に導入できる。
仕組み
Vue の中心には 2 つの機能がある。1 つは宣言的レンダリングで、HTML を拡張したテンプレート構文で、JavaScript の状態から HTML の出力を記述する。もう 1 つはリアクティビティで、JavaScript の状態の変化を自動で追跡し、DOM を効率よく更新する。
コンポーネントは、ロジック、テンプレート、スタイルを 1 つの *.vue ファイルにまとめた単一ファイルコンポーネント(SFC)で書くのが推奨されている。API の書き方には、data や methods などのオプションでロジックを書く Options API と、import した関数でロジックを書く Composition API がある。Options API は Composition API の上に実装されている。
例
<script setup>
import { ref } from "vue"
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>注意点
公式ドキュメントによると、Options API はリアクティビティの細部を隠すので初心者に向いている。Composition API は自由度が高い分、Vue のリアクティビティを理解していないと使いこなせない。本格的なアプリケーションでは、Composition API と SFC の組み合わせが勧められている。ビジネスロジックをコンポーネントから切り離すには、Composable を使う。