Problem Statement
When do you use computed properties vs methods vs watchers?
Explanation
Computed properties are cached, declarative derivations of reactive state—use them for values shown in the template or used in other logic. Methods run every call and are not cached—use them for actions. Watchers observe specific sources and run side effects when they change—use for asynchronous tasks (API calls), manual debouncing, or bridging to non-Vue code.
Code Solution
SolutionRead Only
export default {
data: () => ({ first: 'Ada', last: 'Lovelace', q: '' }),
computed: { full(){ return `${this.first} ${this.last}` } },
methods: { clear(){ this.q = '' } },
watch: { q(newQ){ this.search(newQ) } }
}Practice Sets
This question appears in the following practice sets: