What are computed properties in Vue and how do they differ from methods?
Learn how Vue computed properties differ from methods: caching, reactive dependency tracking, and when to use each for fast, clean components.
Expected Interview Answer
Computed properties are reactive, cached values derived from other reactive state; they only re-run their getter when a dependency changes, whereas methods run every time they are called.
A computed property tracks the reactive data it reads and memoizes the result, returning the cached value until a dependency updates. A method, by contrast, executes on every render or invocation regardless of whether its inputs changed. Use computed for derived values you read declaratively in the template, and methods for actions, event handlers, or logic that needs arguments.
- Automatic caching avoids redundant recalculation
- Cleaner, declarative templates
- Recomputes only when dependencies change
- Improves rendering performance
- Separates derived state from actions
AI Mentor Explanation
A computed run-rate on the scoreboard is only recalculated when a run is scored or a ball is bowled, then it stays put on the screen. A method is like asking the scorer to work out the run-rate by hand every single time anyone glances up, even when nothing has changed since the last delivery.
Step-by-Step Explanation
Step 1
Identify derived state
Find values in the template that are computed from other reactive data, like a full name from first and last.
Step 2
Declare a computed
Use the computed() function (Composition API) or the computed option (Options API) returning the derived value.
Step 3
Read it declaratively
Reference the computed like a property in the template — no parentheses, no arguments.
Step 4
Let caching work
Vue tracks dependencies automatically and only re-runs the getter when one of them changes.
Step 5
Use methods for actions
Reserve methods for event handlers, side effects, or logic that needs arguments.
What Interviewer Expects
- Understanding of reactivity and dependency tracking
- Knowledge that computed results are cached
- When to choose computed vs method
- Awareness that methods run on every render
- Ability to give a concrete derived-state example
Common Mistakes
- Claiming computed properties are not cached
- Using a method for derived state that could be computed
- Trying to pass arguments to a computed property
- Adding side effects inside a computed getter
- Confusing computed with watchers
Best Answer (HR Friendly)
“A computed property in Vue is a value calculated from other data that only updates when the underlying data changes, so it is efficient. A method just runs its code every time you call it, so computed properties are better for showing derived values while methods are better for actions.”
Code Example
import { ref, computed } from 'vue'
const first = ref('Ada')
const last = ref('Lovelace')
// Cached: recomputes only when first or last changes
const fullName = computed(() => `${first.value} ${last.value}`)
// Runs every time it is called in the template
function fullNameMethod() {
return `${first.value} ${last.value}`
}Follow-up Questions
- Can a computed property have a setter as well as a getter?
- What happens if you put a side effect inside a computed property?
- How does Vue know which dependencies a computed relies on?
- When would you prefer a method over a computed property?
- How do computed properties differ from watchers?
MCQ Practice
1. What is the main performance advantage of a computed property over a method?
A computed caches its result and only re-runs its getter when a reactive dependency it reads changes.
2. When does a Vue method re-execute?
Methods have no caching, so they run every time they are invoked, including on each re-render that calls them.
3. Which is the best use case for a computed property?
Computed properties shine for derived, argument-free values read declaratively in the template.
Flash Cards
Are computed properties cached? — Yes — they memoize their result and only re-run when a reactive dependency changes.
When does a method run? — Every time it is called or the component re-renders; there is no caching.
Can a computed take arguments? — No — if you need arguments, use a method (or return a function from computed).
Best use for computed? — Derived, declarative display values built from other reactive state.