Vue Reactive Component

Depth reactivity

Now is the time to take a deep dive! One of the most distinctive features of Vue is the discrete reactivity system. Models are proxyed JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it's also important to understand how it works to avoid some common pitfalls. In this post, we are going to learn about some of the details of Vue's reactivity.

What is reactivity?
The reactivity is tied to the properties that we define in the data options; Vue will detect each time we modify these properties.

Each of these properties has a watcher internal to the framework that detects when there are changes to it and when it is detected, it triggers the render option (of the template), resulting in us seeing the changes reflected in that property in the logic that we have defined. in our template; It is important to note that the render process is executed ONLY if the property changes affect the template;

In practice we have a highly optimized process when Vue updates the DOM (template)

You can see an example in which we see this in more detail with practical examples: