Computed properties are cached, reactive getters that recompute only when their dependencies change. Use them for derived state instead of methods to avoid unnecessary recalculation. Computed values improve performance by caching, so test dependency changes and edge cases.
What are computed properties in Vue?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Computed properties in Vue are a powerful way to define reactive logic that depends on existing data. They act like dynamic properties that automatically re-evaluate when the data they depend on changes — and they cache the result until dependencies are updated again.
HTML
<template>
<div>
<p>First Name: {{ firstName }}</p>
<p>Last Name: {{ lastName }}</p>
<p>Full Name (computed): {{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'Mina',
lastName: 'Yilmaz'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
In this example, fullName is a computed property that automatically re-calculates when firstName or lastName changes. Vue caches its value until one of these dependencies updates, avoiding unnecessary re-renders.
How Computed Properties Work
When Vue initializes a computed property, it tracks the reactive dependencies used inside the property. When any of those dependencies change, Vue marks the computed property as 'dirty' and re-evaluates it upon the next access.
Computed vs Methods
While both can return derived values, computed properties are cached and only re-run when dependencies change. In contrast, methods are executed every time they are called, regardless of data changes.
Feature | Computed | Method |
|---|---|---|
Caching | Yes (re-evaluates only when dependencies change) | No (runs every time it’s called) |
Use Case | For derived or reactive data | For event-driven or non-reactive actions |
Performance | Optimized for efficiency | Less efficient for repeated calls |
JAVASCRIPT
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
Here, the computed property reversedMessage will only re-run when message changes, not on every render cycle.
Computed Getters and Setters
Computed properties can also include a setter to handle updates in both directions.
JAVASCRIPT
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(value) {
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
Now, assigning a value like this.fullName = 'Jane Doe' automatically updates firstName and lastName.
Think of computed properties as smart variables that know when and how to update — they deliver dynamic results while minimizing unnecessary recalculations.
Practical scenario
You compute a cart total from line items and want it to update only when inputs change.
Common pitfalls
- Using methods instead of computed, causing unnecessary recalculation.
- Mutating state inside computed getters.
- Forgetting computed must return a value.
Computed values are cached but should remain pure. Test updates when dependencies change.
Summary
Summary
- Computed properties calculate values based on reactive data.
- They are cached until dependencies change.
- Useful for derived state and transformations.
- Support both getters and setters for two-way interaction.
Similar questions
Computed vs watch in Vue: derived state (cached) vs side effects (imperative)What does nextTick() do in Vue, and why are DOM measurements wrong immediately after a state change?watch vs watchEffect in Vue: what’s the difference, when does each run, and how can you accidentally create infinite loops?
Guides