Vue.js Computed Properties and Watchers

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