VueJs Reactivity... And How does it work

One of the main features of any modern JavaScript framework is reactivity. in this article you're gonna understand how Vue.Js tackles this by :

1. Understanding the problem.

2. Vue's solution to that problem.

The Problem

You're coding using vanilla JavaScript and the code calculates the total price of some products and logs it...

Now our price has gone up to 20 per product, let's log the price again....
to our surprise it's still 10 but why?! that's supposed to be 40, right? WRONG.

Take a good look at the code again, the calculation only happens once. We never told JavaScript to track any changes nor we told it that the total price calculation is meant to update according to changes, and here's where The Reactive Vue really shines...

Vue's solution

The approach is that we want to be able to store the critical value in some sort and be able to track it and trigger the effect when the value changes.

The calculation is wrapped in a function called "effect" and stored for later use when our value(price) changes. For that to happen, there are 3 main operations(functions) to run:

1. track() -> to actually save our code

2. effect() -> the actual behavior/calculation

3. trigger() -> to run the effect/s
   

Brainstorming...

1. Can there be multiple effects? How does Vue handle that?

2. What happens when we want to track multiple properties?

3. What if we track objects...?

I'll answer all that in the upcoming post as well as your questions. Feel free to ask me about anything, it's ok we're all learning here.

Leave a ♥️ for the post if it was useful to reach more devs 🧑‍💻🧑‍💻...
Follow me for more related content...

recourses:
https://www.youtube.com/c/VueMastery