computed Computed Properties
Last updated: 2026-10-22
computed Computed Properties
The computed option declares derived values that recalculate and cache when dependencies change — used like plain properties in templates.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
data() { return { price: 10, qty: 2 } },
computed: {
total() { return this.price * this.qty }
}
}⚙️ Arguments
| value | An object whose keys are computed names and values are getters (or get/set pairs) |
|---|
Returns：Read like a property; cached until dependencies change
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Total: 20' and recalculates on any input change.💡 Key Points
💡 Tip Prefer computed over methods: it caches while methods re-run every render.
⚠️ Warning No side effects inside getters — that is what watch is for.
ℹ️ Note Use the get/set form for writable computed values such as full name.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from methods?
A computed caches by dependency; methods run on every access.
Q Why no parentheses in templates?
A It is read like a property — this.total, not a call.
Q Can it depend on props?
A Yes — deriving from props is the classic pattern.
