Vue3 Watch Deep

Posted on  by admin

In this series, I'm focusing on the basics needed to start working in Vue 3 for people who might have some experience in Vue 2, but who haven't yet built anything in Vue 3.

Check out my previous posts in the series:.

Today, I'll introduce how to use methods, watch, and computed in Vue 3, and I'll also give a general comparison of watch and the new watchEffect.

Putting It All Together

The way I learn best is by connecting abstract concepts to a real world situation, so I tried to think of a simple, realistic situation for using methods, watch, and computed.

The situation would need to demonstrate the following:.

doing something to data properties to change them (using methods). making something else occur (i.e, a side effect) because of a change to the data properties (using watch).

returning a value that is calculated based on data properties that have been changed (computed).

I will use a real-world example of a company with employees and managers; the logic will help keep track of number of employees, number of managers, and total company headcount.

Not the most exciting example, but I really just want to keep it simple.

One of the first things I need to be able to do, whether I'm using Vue 2 or Vue 3, is be able to make stuff happen with methods/functions (note: I'm using the terms functions and methods interchangeably in this section).

The magic of Vue is its reactivity, so local state updates automatically as stuff happens.

The stuff that happens is often triggered by methods. In my real-world example, I want to create a component that has a variable to represent the number of employees with buttons I click to add or subtract the number of employees, changing the headcount.

I'll write functions to perform these basic actions.