What is the Reactivity system, why is it related to the inner workings of Vue.js

Tram Ho

In the first Vue.js Course article we put together the Hello world example with both Vue.js and jQuery, both of which work well and in this article I also warned if the number of <h1> and <input> tags, the code management in jQuery will be much more complicated. (You should review the Hello world example in the Introduction to Vue.js framework for a better understanding of the next example.)

This example is nothing special, when you change the text in any of the 3 input boxes, the data will update all the other elements in the interface. It works fine and it doesn’t matter if the numbers are only 3 <h1> and 3 <input>. Imagine an application that has hundreds of places that need to update value, it’s confusing when the amount of code to check for updates is very fast. Let’s try to rewrite this example with Vue.js.

You will see some strange points, why use the myObject object when just pushing the message to the object at the top level. myObject will be used in the examples below, just as simple as that 😃 . Results as well as examples with jQuery:

You see in Vue.js the data-driven approach makes state management issues simple, we don’t need to be concerned about events that can change data, so if there are rows hundred input boxes with different events also doesn’t matter. The question arises, why does the Vue.js framework accomplish this? That’s because Vue.js has a built-in reactivity system – the system can react itself to changes.

Vue reactivity system

One of Vue’s best features is its monitoring and response system. The model is simply Javascript objects, when you change them, the View will be updated, it helps to manage status simply and intuitively. Vue allows declaring reactivity properties in the data attribute of the Vue instance (Vue instance – if you are not familiar with this concept, you should read the Vue instance Basic article). The term reactivity property can be roughly translated as the auto update property or the “reaction” attribute, throughout the course of this course I will keep the terms reactivity property and reactivity system in place.

Vue.js is inspired by the MVVM model, with properties that respond to two-way data binding. How can Vue.js track changes? and as we all know there are also Vue changes that cannot be tracked but must be passed through a Vue built-in method Vue.set (). See more about Vue.set here. ## Track changes with reactivity properties

When you pass a regular Javascript object into a Vue entity via the data option, Vue will browse all the properties of this object and convert them to getter / setter using Object.defineProperty. This is a feature only available on ECMAScript 5 (another name for Javascript), which is why Vue does not support IE8 and lower. ### Getter and setter in Javascript

An object in Javascript, when retrieved to get data or change attributes, is usually in the following direct way:

But when using get and set methods in Javascript to define pseudo properties, these methods will override the default method. The get syntax connects object properties to a function that will be called when we retrieve the property value.

The set method is the opposite, it also associates an attribute with a function and this function is called when setting the value for the property.

We can define get and set methods for an object through the Object.defineProperty () method:

The Vue.js framework uses the same method above to control changes in attribute values. These getter and setter are hidden from the user, it makes it possible for Vue to perform independent tracking and report changes when properties are retrieved or changed. Another note is that the console mode in the browser reformats the getter / setter differently when converting the logged data object so you need to install Vue Devtools to have a more friendly interface when debugging. In the Vue.js example at the beginning of the article, turn on the console screen, and type in vm.myObject and you’ll see Vue has changed the myObject object with getter and setter:

You see, Vue has no control over the additional properties after initializing the Vue entity, no get and set methods for the active property are created. To add these properties we have to use the Vue.set method or with data arrays we can use the splice () method.

When we check again, the from property has been added to the get and set methods.

Sometimes you also want to assign some properties to an existing object, for example using Object.assign () or _.extend (). However, the properties added to the object will not trigger changes. In this case, it is necessary to create a new object with properties from both the original object and the property you want to add.

Read more about Vue.set and how to set values ​​for arrays in V-for loop handling.

The reactivity system model in Vue With the information about getter, setter and Object.defineProperty we have understood how Vue handles, the model below summarizes the detailed handling above.

Each component entity has a corresponding watcher instance to record the properties that are processed during rendering. After that, the setter is activated, it notifies the watcher and this causes the component to render. Vue does not allow automatic adding of “root” response properties, you need to initialize the Vue entity and declare the necessary properties, even just an empty value.

If you do not declare the message in the data option, Vue will warn you that the render function tries to access an attribute that does not exist. There are technical reasons behind this limitation. Declaring “reactive” properties makes the component code easier to understand when being reviewed or read by other developers. ## Updating asynchronous queues

Vue performs asynchronous DOM updates, any change data is monitored, it creates a queue and a buffer for all data to be changed in the same loop of the event. If the same watcher is enabled multiple times, it will be pushed into the queue only once, which reduces unnecessary computations and operations with the DOM. Then, in the loop of the next event, Vue clears the queue. Vue tries to implement pure Promise.then and MutationObserver methods to synchronize the queue and if set error executes setTimeout (fn, 0).

For example, when setting vm.someData = ‘new value’, the component will not be redrawn immediately, it will update in the next “tick”, when the queue is cleared. Vue.js encourages developers to go in the direction of data-driver, avoiding handling DOM directly. In order, if you want to wait until Vue.js finishes updating the DOM after the data has been changed, you can use Vue.nextTick (callback) right after the data is changed. The callback will be called after the DOM has finished updating. For example:


Through the article, you must have understood quite a bit of internal content inside Vue.js and also reinforced the unusual cases that Vue.js cannot control. The article is in-depth about some of the problems that the reactivity system solves, it explains the knowledge you already know better so there will be no practice exercises, see you in the next section. Please.

Share the news now

Source : Viblo