Modern Vue.js development requires understanding three fundamental reactive primitives: methods, computed properties, and watchers. Each serves a distinct purpose in Vue's reactivity system. Methods execute on demand without caching, computed properties cache derived values automatically, and watchers trigger side effects in response to state changes. This guide covers practical patterns for building performant applications that leverage Vue's reactivity effectively.
Understanding when to use each approach is essential for writing clean, efficient Vue code. Methods excel at on-demand operations, computed properties provide intelligent caching for derived state, and watchers bridge reactive changes with side effects like API calls and DOM manipulation. Whether you're building a simple web application or a complex enterprise system, mastering these patterns will improve both performance and maintainability.
Understanding the Three Pillars of Vue Reactivity
Vue's reactivity system is built on three complementary concepts that work together to create dynamic, responsive applications. Methods are general-purpose JavaScript functions defined within a component that execute whenever called, without any automatic caching or reactive tracking. Computed properties are reactive getters that automatically cache their results based on dependencies and recalculate only when those dependencies change. Watchers provide a mechanism for executing side effects in response to reactive state changes, supporting asynchronous operations and external API interactions. Each pillar addresses a specific category of challenges in building reactive user interfaces.
The key distinction lies in their caching behavior and purpose: methods run fresh every invocation, computed properties intelligently cache derived values, and watchers specialize in side effects that computed properties cannot handle. This separation of concerns makes Vue's reactivity both powerful and intuitive when applied correctly. For teams implementing custom web solutions, understanding these patterns is fundamental to building scalable applications.
Methods: On-Demand Execution
Methods are regular JavaScript functions defined in a Vue component. They execute whenever called, with no automatic caching or reactive dependency tracking. This makes methods ideal for event handlers, one-time operations, and logic that should run on specific triggers rather than in response to reactive state changes. In the Options API, methods are defined within the methods option and automatically receive access to the component instance via this. In the Composition API with <script setup>, methods are simply regular functions that can access refs and other reactive state directly.
Use methods when you need to perform operations that should always execute fresh, such as form submissions, navigation handlers, or complex calculations that don't benefit from caching. Methods can accept parameters, return values, and perform side effects including asynchronous operations. Performance-wise, methods execute every time they're called, so avoid using them in templates for values that would benefit from caching--this is where computed properties shine instead.
1// Options API2export default {3 methods: {4 handleClick(event) {5 console.log('Button clicked:', event.target);6 },7 async fetchUserData(userId) {8 const response = await fetch(`/api/users/${userId}`);9 return response.json();10 },11 formatDate(date, format = 'YYYY-MM-DD') {12 // Date formatting logic13 return formattedDate;14 }15 }16}17 18// Composition API with <script setup>19import { ref } from 'vue';20 21const handleSubmit = (event) => {22 event.preventDefault();23 // Form submission logic24};25 26const calculateTotal = (items) => {27 return items.reduce((sum, item) => sum + item.price, 0);28};Computed Properties: Cached Derived Values
Computed properties are reactive getters that automatically cache their results based on their dependencies. When any reactive dependency changes, the computed value recalculates only the next time it's accessed--not on every render. This caching behavior makes computed properties highly efficient for deriving state from other reactive sources without manual synchronization. Vue automatically tracks all reactive sources used within the computed function and invalidates the cache when any dependency changes.
Computed properties can be defined as simple getters or as objects with both get and set functions for two-way binding. They're perfect for transforming, filtering, or aggregating data in templates without sacrificing performance. The key to effective computed properties is keeping them pure and free of side effects--simply derive values from reactive state and let Vue handle the caching automatically. This approach aligns with best practices in modern web development for creating maintainable, performant applications.
1import { ref, computed } from 'vue';2 3const price = ref(100);4const quantity = ref(2);5 6// Basic computed - auto-cached7const subtotal = computed(() => price.value * quantity.value);8 9// Computed with formatter10const formattedPrice = computed(() => {11 return new Intl.NumberFormat('en-US', {12 style: 'currency',13 currency: 'USD'14 }).format(price.value);15});16 17// Getter and setter18const fullName = computed({19 get() {20 return `${firstName.value} ${lastName.value}`;21 },22 set(newValue) {23 [firstName.value, lastName.value] = newValue.split(' ');24 }25});26 27// Advanced: filtering with computed28const products = ref([29 { name: 'Laptop', price: 999, category: 'electronics' },30 { name: 'Book', price: 29, category: 'books' },31 { name: 'Phone', price: 699, category: 'electronics' }32]);33 34const electronicsTotal = computed(() => {35 return products.value36 .filter(p => p.category === 'electronics')37 .reduce((sum, p) => sum + p.price, 0);38});Automatic Caching
Computed properties only recalculate when dependencies change, improving performance significantly.
Reactive Dependencies
Vue automatically tracks all reactive sources used within the computed function.
Template Integration
Use computed properties like regular data properties in templates without calling syntax.
Pure Functions
Keep computed properties free of side effects for predictable, reliable behavior.
Watchers: Reacting to Changes with Side Effects
Watchers are the mechanism for executing side effects in response to reactive state changes. Unlike computed properties, which must be pure and synchronous, watchers can perform asynchronous operations, mutate the DOM, or trigger external API calls. They're the bridge between Vue's reactivity system and the outside world, enabling patterns like data fetching on prop changes, form validation, and auto-save functionality. The watcher callback receives both the new and previous values, allowing for sophisticated change detection logic.
Vue provides several watcher variants: basic watchers for single sources, watchers for multiple sources using arrays, deep watchers for nested object changes, and eager watchers that run immediately on component creation. The watchEffect function offers an alternative approach that automatically tracks all reactive accesses during execution. Proper cleanup using the onCleanup callback prevents memory leaks with subscriptions, timers, and pending requests.
1import { ref, watch } from 'vue';2 3const searchQuery = ref('');4const searchResults = ref([]);5 6// Simple watcher7watch(searchQuery, async (newQuery, oldQuery) => {8 if (newQuery.length > 2) {9 const response = await fetch(`/api/search?q=${newQuery}`);10 searchResults.value = await response.json();11 }12});13 14// Watching multiple sources15watch(16 [firstName, lastName, email],17 ([newFirst, newLast, newEmail], [oldFirst, oldLast, oldEmail]) => {18 console.log('Form changed:', { newFirst, newLast, newEmail });19 validateForm();20 }21);22 23// Watching reactive object properties with getter24const user = ref({ profile: { name: '', email: '' } });25watch(26 () => user.value.profile.name,27 (newName, oldName) => {28 console.log('Name changed from', oldName, 'to', newName);29 }30);Advanced Watcher Options
Deep Watchers
Use deep watching when you need to react to any nested property change in an object or array. When you set { deep: true }, Vue traverses the entire watched object and triggers the callback on any property change. Be aware of the performance cost with large objects--consider watching specific paths using getter functions instead when possible.
Eager Watchers (immediate: true)
By default, watchers only execute when the watched source changes. Setting { immediate: true } executes the watcher immediately on component creation, which is useful for fetching initial data based on props or setting up validation state.
watchEffect
An alternative to watch that tracks all reactive accesses during execution. The effect runs immediately and re-runs whenever any tracked dependency changes. This is simpler for cases where you want automatic dependency detection, but be cautious about unintended tracking.
Side Effect Cleanup
Clean up resources in watchers using the onCleanup callback to prevent memory leaks. This pattern is essential when dealing with subscriptions, timers, or pending requests that should be cancelled when the watcher re-runs or the component unmounts.
Callback Flush Timing
Control when watcher callbacks run relative to DOM updates using the flush option. The default 'pre' runs before DOM update, 'post' runs after DOM update (useful for accessing updated elements), and 'sync' runs synchronously (use sparingly due to performance impact).
1import { ref, watch, watchEffect, onUnmounted } from 'vue';2 3// Deep watcher4const formData = ref({ user: { profile: { name: '', bio: '' } } });5watch(formData, (newVal) => {6 console.log('Form changed:', newVal);7}, { deep: true });8 9// Eager watcher - runs immediately10watch(11 () => props.initialId,12 (newId) => {13 if (newId) fetchData(newId);14 },15 { immediate: true }16);17 18// Once watcher (Vue 3.5+)19watch(20 () => connectionStatus.value,21 (status) => {22 console.log('Connected:', status);23 },24 { once: true }25);26 27// watchEffect - auto-tracks dependencies28const todoId = ref(1);29const todo = ref(null);30 31watchEffect(async () => {32 const response = await fetch(33 `https://jsonplaceholder.typicode.com/todos/${todoId.value}`34 );35 todo.value = await response.json();36});37 38// cleanup pattern39watch(source, (newValue, oldValue, onCleanup) => {40 const controller = new AbortController();41 42 fetch(`/api/data/${newValue}`, { signal: controller.signal })43 .then(r => r.json())44 .then(data => { /* handle data */ })45 .catch(err => {46 if (err.name !== 'AbortError') console.error('Fetch error:', err);47 });48 49 onCleanup(() => {50 controller.abort();51 });52});Performance Comparison: When to Use Each Approach
Choosing the right reactive approach directly impacts application performance and code maintainability. Methods execute on every call without caching, making them ideal for one-time operations and event handlers. Computed properties leverage Vue's automatic caching to avoid unnecessary recalculation, which is essential for derived values used in templates. Watchers support asynchronous side effects but should be used judiciously--prefer computed properties when you only need to derive values.
For optimal performance: prefer computed properties over methods for any derived data displayed in templates, use watchers specifically for side effects like API calls or DOM manipulation, and apply specific watching options (getter functions, shallowRef) rather than deep watching when possible. Clean up watchers and subscriptions in onUnmounted to prevent memory leaks in long-running applications. These performance optimization techniques are essential for building scalable web applications that perform well under load.
| Scenario | Best Choice | Reason |
|---|---|---|
| Event handler | Method | Executes on demand, no caching needed |
| Derive data for display | Computed | Automatic caching, reactive updates |
| Trigger API on data change | Watcher | Supports async, side effects |
| Complex derived state | Computed | Caching prevents unnecessary recalculation |
| DOM manipulation | Watcher with flush: 'post' | Control timing relative to updates |
| One-time operation | Method | No reactive tracking needed |
Common Patterns and Examples
Form Validation with Watchers
Real-time form validation is a classic use case for watchers, combining multiple watchers to validate interdependent fields as users type. This pattern provides immediate feedback without requiring form submission.
Auto-Save with Watchers
Implementing auto-save functionality with proper debounce prevents excessive server calls while ensuring user data is preserved. The cleanup pattern prevents memory leaks from pending requests.
Computed Property for Filtering and Sorting
A common pattern for table and list views uses computed properties to combine multiple filter and sort criteria. The caching behavior ensures efficient updates as criteria change.
1import { reactive, watch } from 'vue';2 3const form = reactive({4 email: '',5 password: '',6 confirmPassword: ''7});8 9const errors = reactive({10 email: null,11 password: null,12 confirmPassword: null13});14 15// Real-time validation with watchers16watch(() => form.email, (email) => {17 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;18 errors.email = emailRegex.test(email) ? null : 'Invalid email format';19});20 21watch([() => form.password, () => form.confirmPassword], 22 ([password, confirm]) => {23 errors.confirmPassword = password === confirm 24 ? null 25 : 'Passwords do not match';26 }27);28 29// Auto-save pattern with debounce30const document = ref({ title: '', content: '' });31const saveStatus = ref('saved');32let saveTimeout = null;33 34watch(document, (newDoc) => {35 saveStatus.value = 'saving...';36 37 if (saveTimeout) clearTimeout(saveTimeout);38 39 saveTimeout = setTimeout(async () => {40 try {41 await saveToServer(newDoc);42 saveStatus.value = 'saved';43 } catch (error) {44 saveStatus.value = 'error';45 }46 }, 1000);47}, { deep: true });48 49onUnmounted(() => {50 if (saveTimeout) clearTimeout(saveTimeout);51});Frequently Asked Questions
Understanding the nuances of Vue's reactivity system comes with practice. Here are answers to common questions developers encounter when working with methods, computed properties, and watchers.
Common Vue.js Reactivity Questions
Conclusion
Mastering methods, computed properties, and watchers is essential for building performant Vue.js applications. Remember these key principles: use methods for on-demand execution without reactive caching, such as event handlers and one-time operations. Apply computed properties for cached derived values that update automatically based on dependencies, making them ideal for template display. Reserve watchers for side effects including asynchronous operations, API calls, and DOM manipulation.
Choosing the right tool for each scenario keeps your code clean, efficient, and maintainable. Prefer computed properties over methods for derived data in templates to benefit from automatic caching. Use watchers specifically for operations that computed properties cannot handle, and leverage advanced options like cleanup and flush timing for robust production applications. With these patterns mastered, you'll build Vue.js applications that are both responsive and performant.
Sources
- Vue.js Guide: Watchers - Official documentation covering watchers, watchEffect, and advanced options
- Vue.js Guide: Computed Properties - Official documentation for computed property usage and best practices
- Vue.js API: watch - API reference for watch options and cleanup patterns