Back
VueEasyNew
What is `computed()` and how does it differ from a method?
Caching based on reactive dependencies
Ideal Answer
computed() creates a reactive value derived from other reactive state. It's cached — it only recomputes when one of its reactive dependencies changes, and returns the cached result otherwise. A method, on the other hand, is called every time it's referenced (e.g., on every re-render), with no caching.
JavaScript
import { ref, computed } from 'vue'
const firstName = ref('Jane')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
Use computed for derived state that's expensive or reused across the template; use methods for actions or when caching isn't desired.