Mastering watch and watchEffect in Vue 3 with Practical Examples

While they may seem similar, they serve different purposes and excel in various situations. In this article, we'll discuss the differences between watch and watchEffect with practical examples to help you master them in your Vue 3 projects.

1. What is watch in Vue 3?

The watch function allows you to observe and react to changes in specific reactive data properties. This is useful when you want to act in response to changes in a particular value.

Example:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

In this example, every time count is updated, the watch function logs the old and new values to the console.

---

2. What is watchEffect in Vue 3?

Unlike watch, watchEffect automatically tracks any reactive properties that are accessed within its callback. This is particularly useful when you need to track multiple dependencies without explicitly specifying them.

Example:

import { ref, watchEffect } from 'vue';

const count = ref(0);
const doubleCount = ref(0);

watchEffect(() => {
  doubleCount.value = count.value * 2;
  console.log(`Double count is now ${doubleCount.value}`);
});

You don't need to specify dependencies watchEffect automatically tracks all reactive properties used within its callback.

---

3. Key Differences Between watch and watchEffect

Feature	watch	watchEffect
Tracks specific data	Yes	No, tracks all dependencies
Dependency control	Explicit	Automatic
Best use case	Complex data observation	Simple reactive effects

When to Use Which?

• Use watch when you need precise control over which property to observe.
• Use watchEffect when you want to automatically track multiple reactive sources within a block of code.

---

Practical Use Case #1: Syncing Form Inputs with an API

Suppose you want to sync form input data with an API in real time whenever the user makes changes.

import { ref, watch } from 'vue';

const formData = ref({ name: '', email: '' });

watch(formData, (newData) => {
  console.log('Syncing form data with the server:', newData);
}, { deep: true });

Use { deep: true } when watching objects to track changes to nested properties.

---

Practical Use Case #2: Tracking Reactive Data Changes

Imagine you are calculating the total price of products based on price and quantity. You want the total to update automatically when either price or quantity changes.

Example:

import { ref, watchEffect } from 'vue';

const price = ref(100);
const quantity = ref(2);
const total = ref(0);

watchEffect(() => {
  total.value = price.value * quantity.value;
  console.log(`Total price is: $${total.value}`);
});

watchEffect is perfect for cases where multiple reactive values contribute to a single outcome.

---

Common Pitfalls & Best Practices

Common Mistakes:

• Overusing watchEffect for complex cases: This can lead to performance issues when precise control is needed.
• Forgetting { deep: true } in watch when working with nested objects.

Best Practices:

• Use watch for targeted, precise observation.
• Use watchEffect for automatic, simple reactive effects.

---

Conclusion

Both watch and watchEffect are essential tools in Vue 3's reactivity system. Knowing when and how to use them can greatly enhance your app’s responsiveness and performance.

• Use watch when you need to observe specific properties.
• Use watchEffect when you want automatic tracking of dependencies.

Mastering these tools will make you a more efficient Vue developer.

---

If you found this article helpful, feel free to follow me for more Vue and frontend development tips. Happy coding!