Vue.js: What is the difference between computed() and methods in Vue?

computed — cached, reactive. methods — executed on each call.

computed:

• Cached based on dependencies.
• Only re-evaluates when dependencies change.
• Better performance.
• Should be used for derived state.

1import { ref, computed } from "vue"
2
3const count = ref(0)
4const doubled = computed(() => count.value * 2)
5// Only recalculates when count changes

methods:

• Executed every time called.
• No caching.
• For actions/events.
• More flexible.

1function increment() {
2    count.value++
3}
4
5function getDoubled() {
6    return count.value * 2  // Calculates each time
7}

Key differences:

• computed — cached, reactive.
• methods — no cache, always runs.
• Use computed for derived state.
• Use methods for actions.