Vue 3の概要

2020年9月18日、Vue.jsはバージョン3.0（コードネーム：One Piece）をリリースしました。このメジャーアップデートには、4800以上のコミット、40以上のRFC、600以上のプルリクエスト、そして300人以上のコントリビューターが関与しています。公式リポジトリでの最新安定版は2023年10月時点でv3.3.4です。

主な改善点

• パフォーマンス向上：初期レンダリングが約55%高速化、更新時の再レンダリングは133%高速に。ビルド後のファイルサイズは41%削減され、メモリ使用量も54%低減。
• 内部実装の刷新：リアクティビティシステムがObject.definePropertyからProxyへ移行。仮想DOMの再設計とTree-shaking対応により不要なコードのバンドル排除が可能に。
• TypeScriptとの親和性強化：本体がTypeScriptで書き直され、型定義が自然かつ正確に利用可能。
• 新機能の導入：
  • Composition APIによるロジックの再利用性向上
  • <Fragment>、<Teleport>、<Suspense>といった新しいビルトインコンポーネント
  • ライフサイクルフックの追加とdataオプションの関数化必須化

プロジェクトの初期化方法

Viteを使用したセットアップ（推奨）

Viteは次世代フロントエンド開発ツールで、ネイティブESモジュールに基づく高速HMR（ホットモジュール交換）と即時サーバー起動を提供します。

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

セットアップ中にTypeScript、JSX、Vue Router、Pinia、Vitest、ESLintなどのオプションを選択できます。コード整形にはPrettierの代わりにESLintのフォーマッタ統合が推奨されます。

基本的なアプリケーション構成

index.htmlがエントリーポイントとなり、<script type="module">経由でVueアプリケーションがマウントされます。

<script setup lang="ts">
import { createApp } from 'vue'
createApp(App).mount('#app')
</script>

Composition APIの核心概念

setup関数とその代替構文

setup()はコンポーネントの初期化時に実行される関数で、リアクティブな状態やメソッドを定義する場所です。戻り値として公開するプロパティはテンプレート内で直接参照可能です。

<script setup>構文糖衣を使用することで、より簡潔に記述できます：

<script setup lang="ts">
const message = 'Hello Vue 3'
</script>

<template>
  <div>{
  
  { message }}</div>
</template>

refによる基本型のリアクティビティ管理

refはプリミティブ型のデータをリアクティブにするために使用します。JavaScript内では.value経由でアクセスが必要ですが、テンプレート上では自動的にアンラップされます。

import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}

reactiveによるオブジェクトのリアクティビティ管理

reactiveはオブジェクトや配列全体をリアクティブ化します。内部のすべてのプロパティが深く監視され、入れ子構造でも即座に更新が反映されます。

import { reactive } from 'vue'

const state = reactive({
  user: {
    profile: {
      name: 'Taro',
      age: 25
    }
  }
})

const updateName = (newName: string) => {
  state.user.profile.name = newName
}

toRefs / toRef：リアクティブオブジェクトの分割展開

デストラクチャリング後にリアクティビティを維持するためにtoRefsを使用します。

import { reactive, toRefs } from 'vue'

const book = reactive({
  title: 'Vue Guide',
  pages: 300
})

const { title, pages } = toRefs(book)
// title.value や pages.value でアクセス可能

計算プロパティとウォッチャー

computed：派生データの宣言的定義

既存のリアクティブデータから新しい値を算出します。ゲッターとセッターを持つ双方向バインディングも可能です。

import { ref, computed } from 'vue'

const firstName = ref('Yamada')
const lastName = ref('Hanako')

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val) => {
    const [first, last] = val.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

watch：明示的な変更監視

特定のリアクティブデータの変化を監視し、副作用を実行します。基本型、オブジェクト、getter関数などを監視対象に指定できます。

import { ref, watch } from 'vue'

const counter = ref(0)

watch(counter, (newVal, oldVal) => {
  console.log(`Counter changed: ${oldVal} → ${newVal}`)
})

watchEffect：依存関係自動追跡

watchEffectは内部でアクセスしたリアクティブデータを自動的に依存として登録し、それらが変更されたときにコールバックを再実行します。

import { ref, watchEffect } from 'vue'

const temperature = ref(25)
const waterLevel = ref(10)

watchEffect(() => {
  if (temperature.value >= 50 || waterLevel.value >= 20) {
    console.log('Alert: threshold exceeded!')
  }
})

ベストプラクティスのまとめ

• プリミティブ型の状態管理にはrefを使用
• 複雑なオブジェクトや深い階層にはreactiveが適している
• コンポーネント間でロジックを共有する場合はComposition APIのカスタム関数を作成
• watchは明示的な監視が必要な場合に、watchEffectは自動追跡で済むシンプルなケースに選択