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.