How to Build Your Own Reactivity System

What is reactivity? I really like how Evan explained it in his talk, so I’ll use his examples. Say you have a variable a.

Now, let’s say you have another variable b, such that b = a * 3 .

That’s working just fine. But what happens if you need to change a?

Even though a changed, b stayed the same. Why? Because you never changed b. If you want to make sure b is still a * 3, you’d have to do it like this:

Now, this is working, but it would be annoying to have to type out b = a * 3 every time a changes. We could solve this problem by wrapping the update to b in a function

But, this still isn’t a very nice way of doing things. While it’s not too problematic in this example, imagine if we had 10 different variables, that all had a potentially complex relation to another variable or variables. We’d need a separate onUpdate() method for each variable. Instead of this awkward and imperative API, it’d be nice to have a simpler, more declarative API that just does what we want it to do. Evan compared it to a spreadsheet, where we can update one cell and know that any cell that depends on the one we updated will automatically update itself.

The good thing is that people have already come up with a number of solutions to this reactivity problem. In fact, each of the three major web development frameworks provides a solution to reactivity:

We’re going to implement Vue’s reactivity system in pure JavaScript. Before we get into the code, let’s go into some more details about exactly what we’re building.

We’re going to create a class, called Watcher, that takes in two properties: a value getter and a callback. The value getter can be any function that has a return value. Example:

The getter will probably have dependencies, or variables it depends on to get its value. In the example above, a is the only dependency of the getter function. Getter functions can have multiple dependencies, though. For example, () => x * y has both x and y as dependencies.

Whenever a dependency of the getter function changes, we’ll automatically run the callback function, passing in the current value and the previous value. This callback can do anything, from just logging the value to displaying the value in a div.

When we’re finished, we’ll have a general-purpose reactivity API. Here’s an example of its usage:

Even though Dep instances are responsible for alerting subscribers of changes to a value, each Dep instance doesn’t actually know what value it’s watching. So, it each Dep instance has a notify() method, which lets it know when its value changes. We’ll talk more about who calls notify() later, but for now just assume it gets called whenever the watched value changes. Here’s a working Dep implementation:

What is Dep.target, and when does it get a value? Dep.target is a Watcher instance that lets the Dep instance know who’s using its value. This is necessary because the Dep instance needs to register itself as a dependency of the target watcher. There are two functions, pushTarget() and popTarget(), that manage the current Dep.target. Here’s what these look like:

We’ll discuss these methods more in the next section.

The Watcher class takes in a getter function and a callback function, and stores an array of dependencies of the value computed by the getter function. It tracks the values of the dependencies, and runs the callback function whenever any of these dependencies change. Here’s an example:

In Vue’s code, the Watcher class has several methods, but, for our purposes, we just need to implement three of them:

Here’s the code for our Watcher class:

Now we’ve written each part of our reactivity system, but how does it all work? Each part of the system is so interconnected with all the other parts that it can be difficult to understand. Let’s walk step by step through what happens in an example usage of our Watcher class.

We’ll start by setting everything up:

First, the constructor for the Watcher class runs the following:

Here’s Watcher#get():

First, it calls the pushTarget() function, which assigns this (the foodsWatcher) to Dep.target. Then, it calls this.getter(), the first function passed to the Watcher constructor. The getter for the foodsWatcher just returns the value of foods.apple. Since foods.apple was made reactive by defineReactive(), it will also run the reactive getter:

This registers foodsWatcher as a subscriber to the Dep instance associated with foods.apple . So there’s now a connection between the foodsWatcher and foods.apple.

How is this helpful? Let’s say we change foods.apple .

Doing this will call the setter on foods.apple. The setter runs dep.notify(), which calls update() on each of the dep’s subscribers. Since the foodsWatcher is a subscriber to the Dep instance, the dep.notify() call will trigger the update method on foodsWatcher. What does Watcher#update() do?

It updates its knowledge of the current value, and then calls the callback supplied in the constructor. Remember that the callback we specified was

So, when we change foods.apple, our reactivity system will let us know! The cool thing is that this happened without any dirty checking every millisecond. It happened without us having to explicitly set the state. It just worked, without us having to think about it at all, just like a spreadsheet. That’s what makes Vue’s reactivity system so incredible.

Related posts:

Paulo Coelho. The Brazilian writer wrote: “When you want something, all the universe conspires to help you achieve it.” (Paulo Coelho) What wise words, I couldn’t agree more with him. I remember once…

El nuevo proyecto de Amazon, llamado Luna, busca entrar al negocio de los videojuegos con una propuesta de gaming en la nube, siendo competencia directa del Stadia de Google y xCloud de Microsoft…

As a beginner learning to code the most common problem that you will face is the “tutorial hell". To escape this hell everyone will advice you to build projects. On the surface, this advice sounds…