Hello friends,

Because of this COVID-19 translation, I was quite free, so I decided to try to rebuild the minimal version of Vue in accordance with my thoughts and understanding of Vue.

Main concept

To complete this Vue minimal, I will go through the following items:

1. How is the Reactivity System?
2. Solution to build Reactivity System to be able to expand later?
3. Reactivity System in Vue.
4. What is VNode?
5. From VNode to DOM HTML.
6. Initially build your own Vue.
7. Build components for your Vue.
8. Build a Todo List with the created Vue.

1. What is Reactivity System?

For those of you who have used Vue, or similar frameworks, you will also see that these frameworks have one thing in common: when updating the state, the content on the web will also be updated.

Problem

I have an example like this:

In the above example, I defined total as the product of quantity and price. However, after I updated the number, the total was not updated. This is exactly how JavaScript works.

To handle

To solve the problem above, I will save the function to calculate the value, so after updating the value a variable I will call to update the old variable.

As you can see in the image, I created a memo array to store all the function values ​​so I can call the update later. Along with my memo, I have defined two more functions saveTarget and reUpdate to save the function to calculate values ​​and recall all those function values ​​to update the entire value of the variables.

This time is different from the previous one, I define the total calculation with a target function, then I proceed to save the target . After updating the quantity, I just need to call reUpdate to recalculate my total .

2. How to build a Reactivity System that can be easily reused?

Although the above has resolved the update value, we still need a more efficient way, need something to manage the dependent targets on that variable to call back. If the above method, even though the update does not affect variables above, but when we call reUpdate they still recalculate the values ​​that are not itself changed.

We need a class that manages dependencies on a variable, and when updating any variable, only calls to update the dependencies on that variable.

Below is how I set up the dependency management class.

Now the original code will change as follows:

After changing, you will see that it still works as you like and looks more reusable code right? But one thing that I still find annoying is that I have to set and reset the target . I will create a function called useEffect to do that.

This useEffect function will pass a target function and the dependencies of the target . Now the code continues to change as follows.

So when using useEffect I will pass a target function and the Dep of the variables on which it depends. And maybe you also see this usage is not optimal. I want it to be “smarter”. That is I only need useEffect to pass the target function, and the variables used in it will automatically add the target to its Dep instead of creating quantityDep or priceDep .

This is when I use Object.defineProperty () . Object.defineProperty allows me to define more getter and setter for each key in the object.

Now, to use Object.defineProperty I will put data on an object. And the way I use Object.defineProperty as follows.

Now that I have defined the getter and setter for each key in the data , now I have to change the useEffect a bit as follows.

Now you just need to update the value as usual, the dependent values ​​on the updated value will also update themselves. The original code will look neat as follows.

Epilogue

So we have completed a Reactivity System. If you look through it, you’ll also see Vue 2 also uses Dep and Object.defineProperty to make Reactivity System.

In the next part, I will join you in putting what you can do in this part into a Vue instance.

Thanks for reading, hopefully this article will help you to access the Reactivity System and initially understand more about frameworks like Vue, …