DEV Community: AhmedFM

Mastering watch and watchEffect in Vue 3 with Practical Examples

AhmedFM — Mon, 17 Feb 2025 18:47:19 +0000

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!

Introducing Flexible Icon Library for Vue 3 🚀

AhmedFM — Fri, 14 Feb 2025 09:58:50 +0000

Hey everyone! I’m excited to share crst-icon, a Vue 3 icon component library designed to make managing icons in your Vue applications effortless. If you’re looking for a solution that is lightweight, highly customizable, and tree-shakeable, then read on!

What Is crst-icon?

crst-icon is a Vue 3 library that provides a smart, efficient way to manage icons in your applications. It comes with a set of default icons and supports adding your own custom icons with ease. With full TypeScript support and accessibility in mind, crst-icon ensures that your UI not only looks great but works seamlessly for everyone.

Key Features

🚀 Vue 3 Support: Built from the ground up for Vue 3.
📦 Built-in Default Icons: Get started quickly with a rich set of essential icons.
🎨 Custom Icon Support: Easily add your own icons to the mix.
🔧 Easy Configuration: Straightforward setup with auto-registration.
💪 TypeScript Support: Full TypeScript declarations for robust development.
🎯 Tree-shakeable: Import only what you need for optimal performance.
🎭 Customizable Styling: Predefined size and color classes along with support for custom CSS variables.
♿ Accessibility: Designed with accessibility best practices in mind.

Quick Start Guide

Installation

npm install @codetab/crst-icon

Setting Up Your Project

// src/icons/index.ts
import { registerIcons } from '@codetab/crst-icon'

const icons = import.meta.glob('./*.vue')
console.log('Icon files found:', icons)

registerIcons(icons)

2.Configure Your Main Application
Import and register the component and styles in your main file:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './icons' // This registers your icons
import { CrstIcon } from '@codetab/crst-icon'
import '@codetab/crst-icon/style.css'

const app = createApp(App)
app.component('CrstIcon', CrstIcon)
app.mount('#app')

3.Use in Your Components
Now you can easily use the icon component in your templates:

<template>
  <div>
    <CrstIcon name="home" size="md" color="primary" />
    <CrstIcon name="menu" size="lg" />
  </div>
</template>

Styling & Customization

Customize icon sizes using built-in classes:

xs = 1rem
sm = 1.5rem
md = 2rem
up to 10xl = 12rem

Colors

Change icon colors with predefined variants (primary, secondary, success, warning, error, info) or override them with CSS variables:

:root {
  --icon-primary-color: #your-color;
  --icon-secondary-color: #your-color;
  --icon-success-color: #your-color;
  --icon-warning-color: #your-color;
  --icon-error-color: #your-color;
  --icon-info-color: #your-color;
  --icon-focus-color: #your-color;
}

Animation

Add spinning animation to your icon:

<CrstIcon name="loading" class="css-icon--spin" />

Why 328 KB Isn’t That Bad?

For a library featuring 100+ icons, 328 KB is quite moderate! Thanks to tree shaking, only the icons you use will end up in your final bundle. Plus, with modern compression (gzip/Brotli), your actual network payload is much smaller.

Built with ❤️ by codetab.tech.

Happy coding! 🚀

DEV Community: AhmedFM

Mastering watch and watchEffect in Vue 3 with Practical Examples

1. What is watch in Vue 3?

2. What is watchEffect in Vue 3?

3. Key Differences Between watch and watchEffect

When to Use Which?

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

Practical Use Case #2: Tracking Reactive Data Changes

Common Pitfalls & Best Practices

Common Mistakes:

Best Practices:

Conclusion

Introducing Flexible Icon Library for Vue 3 🚀

What Is crst-icon?

Key Features

Quick Start Guide

Installation

Setting Up Your Project

Styling & Customization

Colors

Animation

Why 328 KB Isn’t That Bad?

1. What is `watch` in Vue 3?

3. Key Differences Between `watch` and `watchEffect`