Computed properties and watchers are powerful Vue.js features. Understanding when to use each is key to writing clean Vue code.
Computed Properties
Computed properties are cached and only update when dependencies change:
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
activeUsers() {
return this.users.filter(u => u.isActive);
},
total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}Watchers
Watchers react to changes – good for side effects:
watch: {
searchQuery(newVal, oldVal) {
// Debounced API call
this.debouncedSearch(newVal);
},
'$route'(to, from) {
// React to route changes
this.fetchData();
}
}When to Use Which
- Computed: Deriving values, templates, getters
- Watch: Side effects, async operations, complex reactions
Discover more from C4: Container, Code, Cloud & Context
Subscribe to get the latest posts sent to your email.