Vue.js provides powerful reactivity features that help in managing data efficiently. Two important features often compared are watchers (watch) and computed properties (computed). While both can respond to changes in reactive data, they serve different purposes. In this article, we will explore their differences, use cases, and when to use each one.
1. Computed Properties (computed)
Computed properties are reactive and automatically recalculate their values when dependencies change. They are cached and only update when necessary, making them more efficient than methods for derived state.
Key Characteristics of Computed Properties
- Caches results and updates only when dependencies change.
- Ideal for deriving new values from existing state.
- Cannot perform asynchronous operations.
Example: Using a computed property for full name
<script setup>
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
console.log('Computed property is called');
return `${firstName.value} ${lastName.value}`;
});
</script>
<template>
<p>Full Name: {{ fullName }}</p>
</template>
In this example, fullName is only recomputed when firstName or lastName changes.
2. Watchers (watch)
Watchers allow us to execute code in response to changes in a reactive property. Unlike computed properties, watchers are better suited for performing asynchronous operations or triggering side effects when a value changes.
Key Characteristics of Watchers
- Executes code when a watched property changes.
- Useful for API calls, logging, or side effects.
- Supports asynchronous operations.
Example: Using a watcher to fetch data when a value changes
<script setup>
import { ref, watch } from 'vue';
const searchQuery = ref('Vue');
watch(searchQuery, (newQuery, oldQuery) => {
console.log(`Search query changed from ${oldQuery} to ${newQuery}`);
fetchData(newQuery);
});
function fetchData(query) {
console.log(`Fetching data for: ${query}`);
// Simulate an API call
}
</script>
<template>
<input v-model="searchQuery" placeholder="Search..." />
</template>
Here, watch triggers fetchData() every time searchQuery changes, making it ideal for handling asynchronous operations.