One of the features of Vue that first hooked me and many other developers is its reactivity system.

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.

If you want to become a more advanced Vue developer, however, and especially if you want to use advanced features like the Composition API, it’s important to have some level of understanding of how reactivity works under the hood.

In this article, I’ll tell the story of why reactivity was created, how it works in Vue 2, and how it’s evolved to support powerful Vue 3 features like the Composition API.

What is reactivity in Vue?

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 then modify that data during the app lifecycle, like magic, the UI you’ve created from this data will be updated, too.

For example, say you’ve got a data property message in a Vue component and you’re rendering this message in the view with a text interpolation:

Vue.component("my-component", {
  data: {
    message: "Hello, world"
  },
  template: "<p>{{ message }}</p>"
});

This is what will be rendered when the app instantiates:

<p>Hello, world</p>

What will happen when you modify message during the app lifecycle, for example, in a method?

methods: {
  updateMessage () {
    this.message = "Goodbye, world";
  }
}

Vue will automatically update the view to reflect this:

<p>Goodbye, world</p>

Even though this usage of reactivity is one of the key feature of Vue.js, it is actually just one possible use.

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 need a deeper understanding of reactivity

If the success of Vue had to be attributed to just one thing, I’d wager it’s the fact that you can use it to build a robust reactive UI without understanding a thing about how reactivity works.

However, if you want to become an advanced Vue developer, understanding more about reactivity will allow you to:

• Avoid the shortcomings of reactivity (especially in Vue 2)
• Squeeze additional performance out of Vue
• Use advanced features including the Composition API

To begin this understanding, we need to be aware of the JavaScript features that underpin reactivity.

Getters and setters

Did you know that you can alter the way a JavaScript object is written or read? This can be done by providing a custom get or set method for that object.

For example, if you wanted to automatically console log the value of an object any time its modified, you could do that by defining a custom set method (aka “setter”).

const obj = { 
  value: "Hello, world",
  set message (newVal) {
    this.value = newVal;
    console.log(newVal);
  }
  get message () {
    return this.value;
  }
};

obj.message = "Goodbye, world";
// console: Goodbye, world

Instead of logging to the console, what if we used the setter to update the DOM? This is the mechanism that allows reactivity to work.

#vue.js #reactivity #composition api #design patterns #components #vue