Reactivity in VueJS: Useful understanding you need to know

In the world of front-end developers, “Reactivity” is something that everybody uses, but very few people understand. It’s no one’s fault, really, as several people have different definitions of this term in programming. Also, it’s not just the ease in which it allows you to build dynamic UIs, but the fact that it just works without you having to think about it or even understand it. So, Reactivity in Vue.js is something that comes with the package.

Reactivity in Vue.js
Reactivity in Vue.js

If you want to become a more advanced Vue developer, and especially if you want to use advanced features like the Composition API, it’s important to have some level of understanding of how this term works under the hood. So now, we would like to introduce to you guys some of the useful understanding that you need to know about Reactivity in Vue JS. Let’s get into it!

What is Reactivity in Vue JS?

On day #1 of using Vue, the feature that will probably stand out to you most is how effortless it is to get Vue to link a JavaScript data model to the rendered page. When you modify that data during the app lifecycle, the UI will be updated, too. Reactive data can be more broadly thought of as data that causes some intended side effect when accessed or modified.

The intended side effect may be an update of the DOM, the re-calculation of a computed property, or some custom functionality that the developer provides.

Why you may need a better understanding of Reactivity in Vue JS?

So, if the success of Vue had to be attributed to just one thing, it’s the fact that you can use it to build a robust reactive UI. However, if you want to become an advanced Vue developer, understanding more about this will allow you to:

Why you need a better understanding about Reactivity in Vue.js?
Why you need a better understanding about this?
  • Avoid the shortcomings of reactivity (especially in Vue 2)
  • Squeeze additional performance out of Vue instead
  • Use advanced features including the Composition API

Also, for a better understanding, we need to be aware of the JavaScript features that underpin this module.

Vue.js Reactivity System

Vue.js Reactivity system
Vue.js Reactivity system

#1. The first render

On the first render, if a data property is “touched”, its getter function is called. The getter function calls the watcher with an intent to collect this data property as a dependency. If a data property is a dependency, then it means that some target code/function will run, every time the value of this property changes.

#2. Watcher

Whenever a watcher is called for a “Reactivity purpose”, it adds that data property as a dependency from whose getter it was called. The watcher is also responsible for calling the component render function.

#3. Component render function

In reality, Vue’s component render function is not that simple. However, for the sake of understanding, we just need to know that it returns the Virtual DOM Tree with the updated data properties, which gets displayed in the view.

#4. Changes in Data in Reactivity in Vue.js

This is the part, which is basically the core of reactivity in Vue.js. So, when we make a change in a data property, its setter function arises. The setter function notifies the watcher on every change in the data property. The watcher, as we already know runs the component render function. Hence, the change in the data property can display in the view.

Reactivity in Vue 2 and Vue 3

Reactivity in Vue 2 and Vue 3

In Vue 2

In very oversimplified terms, Vue 2 makes data reactive by walking through data each property, computed property, component prop, etc. The user has declared on custom getters and setters that will trigger side effects when modifying the data. Say, for example, you have a Vue component like this:

 const data = {
  id: 1,
  name: "My Item",
  price: 9.99
}

Vue.component("my-item", { data });

At runtime, the data object would be walked through and getters and setters responsible for reactivity would be automatically added.

In Vue 3

The fact about Vue 3 reactivity you should be aware of is that the system was re-written and improved to leverage a new JavaSript feature Proxy. Proxies not only provides a way for Vue 2 to be overcome but also allows the reuse of logic across components via the Composition API. So what are proxies? They’re a special type of object that wraps other objects you want to observe. Also, they are made aware of any kind of operation on that object during runtime.

For example, let’s again create a reactive data object that logs modifications to the console. Only this time, we’ll use the Proxy feature:

 let data = { message: "Hello, world" }; // (1)

const proxy = new Proxy(data, { // (2)
  set (target, property, value) { // (3)
    target[property] = value;
    console.log(target);
  }
});

proxy.message = "Goodbye, world";
/*
Console:
{
  message: "Goodbye, world"
}
*/

Since proxies watch the whole object, new properties can be added during the app lifecycle. Also, it will still be automatically reactive. One thing to remember: being a new JavaScript feature from the ES2015 spec, Proxy is not compatible with some older browsers.

Reactivity and the Composition API

The Composition API is an alternative way of defining Vue components introduced in Vue 3. It allows you to declare component features inside the new setup function instead of creating them as options on the component definition. Also, by allowing us to create data objects that are not bound to the context object (this), the Composition API allows us to utilize reactive Vue data in a much more flexible way.

The Component API for Reactivity in Vue.js
The Component API for Reactivity in Vue.js

However the main intention of the reactive API, and indeed, the key use case of the Composition API is to allow reactive data to be shared between components for the purpose of logic reuse.

Code sharing and reuse in Vue

In Vue 2, any sharing of component code required mixins. This is because it’s imperative to setting up reactivity that any properties you intend to be reactive are available to Vue at the time of instantiation. However, by using the Composition API, data objects using reactive are not bound to the component instance. This means we can share them like any other JavaScript data and retain their reactivity.

For example, you can create a module myReusableFeature, which returns reactive data to any components that would like to consume it:

 import { reactive } from "vue";
import { myReusableFeature } from "./myReusableFeature";

export default {
  setup () {
    const { reactiveDataFromReusableFeature } = myReusableFeature();
    return {
      reactiveDataFromReusableFeature
    }
  }
}

Final words

That should be it! Here are some of the most useful understanding you may need to know about Reactivity in Vue.js. Now assemble all the knowledge that you have known above, and as a result you should have the completed system of this module. Also, we hope that the workflow is clear to you by now. So, you should be able to recreate this reactivity system in vanilla JavaScript for your website.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best Vue JS development services for your business. If you have any questions, don’t hesitate to CONTACT US.

ArrowHiTech services

If you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.

Tags

Share