Vue 3 と Vue 2 の違いまとめ｜移行前に押さえるべき変更点

社内向けのちょっとしたダッシュボードを作ろうとして「Vue 使うか」と軽い気持ちで調べ始めたら、検索で出てくる記事が Vue 2 の書き方と Vue 3 の書き方でバラバラで、まず最初に詰まりました。普段は Python と AWS ばかり触っていて JavaScript はほんとに「ちょっとだけ」なので、new Vue() と createApp() が両方出てくる時点で混乱です。

ということで、自分用に Vue 2 と Vue 3 の違いを整理してみました。2026年8月時点の情報です。

この記事でわかること

• Vue 2 がサポート終了している理由と現在の推奨状況
• Vue 3 のリアクティビティシステムの仕組みの変化
• Options API と Composition API の違いと使い分け
• Vue 3 移行時に引っかかりやすい破壊的変更
• 周辺ツール（ルーター、状態管理、ビルドツール）の変更点
• Vue 3.6 の次期機能について

大前提：Vue 2 はもうサポートが終わっている

違いを比べる前に、そもそもの話として Vue 2 は 2023年12月31日で公式サポートが終了しています。最終マイナーである 2.7.0 がリリースされたのが 2022年7月1日で、そこから EOL という流れだったようです。以降はセキュリティパッチも公式からは出ません。

どうしても Vue 2 を使い続ける必要がある場合は、HeroDevs が提供している有償の延長サポート（Vue 2 NES / Extended LTS）を契約するという選択肢があります。Vue 公式の FAQ にもリンクが置いてあるので、非公式なやつではないです。ただこれ、新規で選ぶ理由にはならないですよね。

一方の Vue 3 は、この記事を書いている時点で安定版が 3.5.40（2026年7月16日リリース）で、その先の 3.6 系がプレリリース段階です。つまり「新規で Vue を始めるなら Vue 3 一択」で、Vue 2 の知識は既存プロジェクトを読むときに必要になる、というのが今の立ち位置かなと。

内部で一番変わったのはリアクティビティ

Vue 2 は Object.defineProperty で各プロパティに getter/setter を仕込んで変更を検知していました。これのつらいところは、あとから足したプロパティや配列のインデックス直接代入が検知できないこと。なので this.$set() という呪文が必要でした。

// Vue 2
this.user.age = 30       // 初期化時に age が無いと反応しない
this.$set(this.user, 'age', 30)  // これが必要だった

this.items[0] = 'a'      // これも検知されない

Vue 3 は Proxy ベースになったので、オブジェクトごと監視できます。結果として $set / $delete は不要になり、というか API 自体が削除されました。

// Vue 3
import { reactive } from 'vue'

const user = reactive({ name: 'nyanchu' })
user.age = 30      // 普通に反応する

ちなみに Proxy は IE11 でポリフィルできないので、Vue 3 は IE11 を切っています。今さらそこを気にする人は少ないと思いますが、レガシー環境の要件がある案件だと効いてくるポイントらしいです。

書き方の違い：Options API と Composition API

Vue 2 の主流は data / methods / computed をオブジェクトで並べる Options API です。Vue 3 でもこれは使えます（消えていません）。ただ Vue 3 では Composition API、特に <script setup> がよく使われている印象です。

<!-- Vue 2 -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    inc() { this.count++ }
  }
}
</script>

<!-- Vue 3 -->
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
const inc = () => count.value++   // .value 忘れがち
</script>

ref の .value は最初ほんとに忘れます。テンプレート内では自動で外れるのに、script 内では必要という非対称さで、自分は3回くらい同じミスをしました。

Options API と Composition API のどっちがいいかは、正直まだ自分の中で結論が出ていません。小さいコンポーネントなら Options API のほうが読みやすい気もするし、ロジックを切り出して使い回すなら Composition API が圧倒的に楽だし。Python でいうとクラスにまとめるか関数に分けるかの話に近いのかな、と勝手に思っています。

なお Vue 2 でも 2.7 で Composition API がバックポートされています。なので「Vue 2 = Options API」と断定するのも正確ではないです。

細かい破壊的変更で引っかかりやすいところ

移行ガイドに全部載っていますが、コードを読んでいて「あれ？」となったものを並べておきます。

• グローバル API：new Vue() → createApp()。Vue.use() のようなグローバル設定がアプリインスタンス単位になった
• フィルター（|）が削除：{{ price | currency }} は使えない。メソッドか computed に置き換える
• $listeners が削除：$attrs に統合された。ラッパーコンポーネントを作っていると確実に踏む
• v-model の仕様変更：.sync 修飾子と model オプションは廃止。代わりに v-model:title のように引数を取れるようになり、複数の v-model が使えるようになった
• ライフサイクル名：beforeDestroy → beforeUnmount、destroyed → unmounted のように変更
• 複数ルートノード OK：テンプレートを <div> で包まなくてよくなった（Fragments）
• v-if と v-for の優先順位が逆転：Vue 3 移行で挙動が変わる。同一要素に併用しているコードは要注意
• カスタムディレクティブのフック名変更：bind → beforeMount など、コンポーネントのライフサイクルに合わせられた

あと Vue 3 で追加された機能として Teleport（モーダルを body 直下に飛ばすやつ）と Suspense（非同期コンポーネントの待機、まだ実験的）があります。Teleport は Vue 2 だと portal-vue というライブラリでやっていたことが標準になった形ですね。

周辺ツールも一緒に変わる

ここが個人的には一番めんどくさそうだと思った部分で、Vue 本体だけの話では済みません。

• ルーティング：Vue Router 3 → 4
• 状態管理：Vuex → Pinia（Vuex 4 も Vue 3 対応はしているものの、公式の新規推奨は Pinia）
• ビルド：Vue CLI（webpack）→ create-vue / Vite
• 型：Vue 3 は TypeScript で書き直されているので、型の効きがかなり良い

Vite に変えたときのビルドの速さは、正直ちょっと感動しました。webpack で待っていた時間はなんだったんだ、という。

既存の Vue 2 プロジェクトを移す場合は、公式の Migration Build（@vue/compat）を挟んで、Vue 2 の書き方に警告を出させながら少しずつ潰していくのが定石らしいです。自分は移行対象の実プロジェクトを持っていないので、ここは受け売りです。

Vue 3.6 で来る変化

調べている途中で知ったんですが、次の 3.6 はなかなか大きいアップデートっぽいです。ポイントは2つで、ひとつはリアクティビティの内部実装を alien-signals ベースにリファクタしたこと、もうひとつが Vapor Mode です。

Vapor Mode は、仮想 DOM を極力介さずに描画する方向の仕組みのようです。Vue 3.6 の RC の時点で機能としては出揃っている状態だそうです。API を大きく変えずに部分的に適用できる（ハイブリッド運用ができる）という話も見かけました。Solid っぽい方向にコンパイラが進化した、という理解でいます。メモリ使用量も 3.5 比で減っているという計測を見かけました。

ただ RC はまだ RC なので、これから Vue を始める人が今日から Vapor Mode を追いかける必要はなさそう。まずは 3.5 系で <script setup> に慣れるところからかなと思っています。

※この記事にはプロモーションが含まれます

ちなみに、お名前.com レンタルサーバー（WordPressに特化した高速レンタルサーバー。月額990円〜、独自ドメイン実質0円）も気になっています。お名前.com レンタルサーバー

まとめ

Vue 3 と Vue 2 の違いをざっくりまとめると、以下のポイントが重要です：

• Vue 2 は 2023年12月でサポート終了。新規プロジェクトは Vue 3 一択
• リアクティビティが Proxy ベースになり、$set などが不要に
• Options API は残っているが、Composition API の <script setup> が主流に
• 破壊的変更が多いので、既存コードから移行する場合は注意が必要
• Vue Router や Vuex も同時に更新する必要がある
• ビルドツールが Vite に変わり、開発体験が大きく改善

ここまで書いておいてなんですが、自分はまだ Vue で作りきったアプリが1本もありません。次はダッシュボードを実際に組んで、Lambda + API Gateway のバックエンドと繋ぐところまでやってみます。その過程で Composition API のコンポーザブル（useXxx）の設計粒度とか、実際の運用がどんな感じになるのか、その辺を詰めたいなと。