computed 算出プロパティ（Options API）
最終更新：2026-10-22
computed 算出プロパティ（Options API）
computed オプションは派生値を宣言します。依存が変わると自動的に再計算されてキャッシュされ、テンプレートでは通常のプロパティと同じように使えます。
| グループ | オプション: 状態 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
data() { return { price: 10, qty: 2 } },
computed: {
total() { return this.price * this.qty }
}
}⚙️ 引数
| value | オブジェクト：キーは算出プロパティ名、値は getter 関数（get/set のペアも可） |
|---|
戻り値：プロパティと同じように読み取れます。依存が変わるまでキャッシュされます
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows 'Total: 20' and recalculates on any input change.💡 ポイント
💡 ヒント methods より computed を優先してください。computed はキャッシュされますが、methods は毎回のレンダリングで再実行されます。
⚠️ 注意 getter 内には副作用（リクエストや代入）を書かないでください。それらは watch の役割です。
ℹ️ 補足 書き込み可能な算出プロパティ（フルネームの分割・結合など）には、get/set のオブジェクト形式を使います。
🏷️ 関連状態
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q methods との違いは何ですか？
A computed は依存に基づいてキャッシュされます。methods はアクセスのたびに再実行され、プロパティのようにバインドできません。
Q テンプレートで括弧が不要なのはなぜですか？
A プロパティとして読み取られる（getter が自動実行される）ためです。this.total であり this.total() ではありません。
Q props に依存できますか？
A できます。props からの派生は最も一般的なパターンで、computed は prop の変化に合わせて自動更新されます。
