computed() Create a Computed Property
Last updated: 2026-10-22
computed() Create a Computed Property
computed() derives a value from other reactive state and caches it: it re-evaluates only when a dependency changes.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const doubled = computed(() => count.value * 2)
// writable computed
const full = computed({
get: () => first.value + " " + last.value,
set: (v) => { [first.value, last.value] = v.split(" ") }
})⚙️ Arguments
| getter | A getter function (or an object with get/set) reading other reactive state |
|---|
Returns：A readonly (or writable) ComputedRef object
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Total: 20' by default; editing either input recalculates the total instantly.💡 Key Points
💡 Tip Cached: reused across the page but computed once, unlike a method call which re-runs on every render.
⚠️ Warning Do not put side effects (requests, mutating other state) inside a computed getter — that is watch's job.
ℹ️ Note It only tracks real reactive sources: with no reactive dependency, the value never updates.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Should I use computed or a method?
A Derived reactive values reused in several places → computed (cached). Parameterized calls or per-invocation work → a plain function.
Q Can I assign to a computed?
A It is readonly by default and assigning warns. Provide a { get, set } object to make it writable.
Q Can a computed be asynchronous?
A No — computed must return synchronously; use watch plus a ref for async derivations.
