What is the difference Between watch and watchEffect in Vue.js 3?

Harish Kumar · · 3005 Views

There are a few cases where we may need to track a reactive property, and we can do this by utilizing a Vue watcher.

In Vue.js 3, in addition to the watch method, there’s a new watchEffect method.

How Does Vue watchEffect Work?

watchEffect is one of the approaches to track reactive dependencies in Vue3. We can simply write a method utilizing reactive properties, and at whatever point one of their values updates, our method will run.

One thing to note is that watchEffect will likewise run immediately at whatever point the component is initialized in addition to running when the dependency changes, so careful when attempting to access the DOM before it's mounted.

watchEffect Example:

let’s assume that we have a type of reactive userID property and simply need to log whenever it changes.

The code would resemble this:

setup () {
    const userID = ref(0)

    watchEffect(() => console.log(userID))
    
    setTimeout(() => {
      userID.value = 1
    }, 1000)

    /*
      * LOG
      * 0 
      * 1
    */

    return {
      date
    }
  }

So right when our component is instated, our watchEffect will run and log the initial value. Then, at whatever point the value of userID changes, our watchEffect will be triggered.

 Difference Between watch vs watchEffect 

So for what reason does this new watchEffect technique even exist when there's a watch method? 

There are some key differences. 

watchEffect will run a method at whatever point any of its dependencies are changed, while watch tracks a particular reactive property and will possibly run when that property changes. 

On the other hand, the watch tracks a particular property or properties and will possibly run when it changes. Likewise, with the way that a watch method is set up, it contains the old value of the property just as its updated value.

Additionally, the watch is lazy, so it will possibly trigger when the dependency changes. watchEffect runs immediately when the component is created and afterward tracks dependency.

So watch is useful for when: 

  1. You need to control which dependencies trigger the method. 

  2. You need access to the previous value.

  3. You need to lazily perform the method.

Obviously, I can't tell you which is best for your task. However, ensure you know the reasons why you're making a coding design choice.

0

Please login or create new account to add your comment.

0 comments
You may also like:

Best Practices for Testing and Quality Assurance in Custom Web App Development

In the fast-paced world of web app development, delivering high-quality products that meet customer expectations is crucial. But how can you ensure your custom web application (...)

Crafting Tomorrow's Apps: React Native App Development

You're on the edge of mobile app development and looking for the next big thing. React Native is one of the hottest platforms for building cross-platform apps that are fast, responsive, (...)
anika

Is jQuery Still a Relevant Choice for Modern Web Development?

In the ever-evolving landscape of web development, staying up to date with the latest trends and technologies is crucial. One question that often arises is whether jQuery, one (...)
Nakul Kumar

How to Use Husky and Lint-Staged with Git Hooks: Automate Code Quality & Formatting

One way to ensure code quality is by using Git hooks in conjunction with tools like Husky and lint-staged. These tools allow you to automate code quality checks and formatting (...)
Harish Kumar

Set up ESLint, Prettier, and VSCode for linting, formatting, and optimizing JavaScript code quality

In this comprehensive tutorial, we will explore how to set up and configure ESLint, Prettier, and Visual studio code to improve code quality and maintain consistent code style (...)
Harish Kumar

The Benefits of Using Hospital Management Software in 2024: A Guide for Healthcare Providers

In the ever-evolving healthcare landscape, integrating technology has become imperative for efficient and effective patient care. One such technological advancement that has revolutionized (...)
anika