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

computed — cached derived state. methods — functions that run on every call.

computed:

• Cached based on reactive dependencies.
• Only re-evaluates when dependencies change.
• Better performance for expensive calculations.
• Should not have side effects.

methods:

• Executed every time called.
• No caching mechanism.
• Can have side effects.
• More flexible for event handling.

1// computed - cached
2import { ref, computed } from "vue"
3
4const count = ref(0)
5const doubled = computed(() => {
6  console.log("Computing...")
7  return count.value * 2
8})
9// Only logs when count changes

1// methods - no cache
2function getDoubled() {
3  console.log("Computing...")
4  return count.value * 2
5}
6// Logs every time called

Key differences:

• computed — cached, reactive, for derived state.
• methods — no cache, always runs, for actions.
• Use computed for expensive calculations that depend on reactive state.