computed() 算出プロパティを作成する
最終更新：2026-10-22
computed() 算出プロパティを作成する
computed() は他のリアクティブな状態から値を導き出し、結果をキャッシュします。依存が変化したときにのみ再計算されます。
| グループ | リアクティビティ: 基本 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const doubled = computed(() => count.value * 2)
// 書き込み可能な算出プロパティ
const full = computed({
get: () => first.value + " " + last.value,
set: (v) => { [first.value, last.value] = v.split(" ") }
})⚙️ 引数
| getter | 他のリアクティブな状態を読み取る getter 関数（または get/set を持つオブジェクト） |
|---|
戻り値：読み取り専用（または書き込み可能）な ComputedRef オブジェクト
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows 'Total: 20' by default; editing either input recalculates the total instantly.💡 ポイント
💡 ヒント キャッシュがあります。複数箇所で同じ computed を使っても計算は 1 回だけです。一方 methods はレンダリングのたびに再実行されます。
⚠️ 注意 computed の getter 内に副作用（リクエスト送信や他の状態の変更など）を書かないでください。それは watch の役割です。
ℹ️ 補足 実際のリアクティブなソースだけが追跡されます。依存の中にリアクティブなデータがない場合、結果は決して更新されません。
🏷️ 関連基本
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q computed と methods、どちらを使うべきですか？
A リアクティブなデータから値を導出し、結果を再利用するなら → computed（キャッシュあり）。引数付きで呼び出す、実行のたびに処理したい（イベント処理など）場合は → 普通の関数です。
Q computed に直接代入できますか？
A デフォルトは読み取り専用で、代入すると警告が出ます。書き込み可能にするには { get, set } 形式を使いましょう。
Q computed の中で非同期コードは使えますか？
A 使えません。computed は同期的に値を返す必要があります。非同期の派生処理は watch + ref を使いましょう。
