Build your own Vue in just 300 lines (Part 2)

Tram Ho

Hello everyone, it’s me again. If you have not seen the previous section, I recommend that you read it later. You can watch it right here .

In the previous section, we learned together and also installed Reactivity System. However in this section we just go into the initialization, preparation only, the next part we have just started to apply.

Initially build your own Vue

In this section, I will start to declare and prepare a few things for my minimal Vue.

Prepare the development environment

Install browserify , esmify , tinyify to build bundle.

Install jest for testing.

Initialize Vue

Folder structure


  • The vue / instance directory will save things related to the Vue instance.
  • The vue / observer directory will save any related state observations.


In this part, I will show you the first steps to prepare for a Vue instance and write unit tests.

I will declare Vue instance, enter options and init for options to be accepted.

The initMixin function will proceed to prepare prototypes for Vue, such as Vue._init is also a prototype prepared in initMixin.

Inside Vue._init , we will proceed with the following steps:

  1. Save the options for later use.
  2. Proceed to initializing the state.

In this section, I will come across a function that was mentioned in the previous section is defineReactiveData . But defineReactiveData this time will not have Dep because we do not need to use, now I just need to ensure the synchronization between and vm. $ .

In that vm is the instance that when I new Vue and vm. $ Data is the data retrieved from the options that I saved in the initData function.

So now our defineReactiveData will only look like this.

At this point, we have completed the initial step of creating the Vue instance.

Build Vue into bundle

After the code is finished, I have to build it into a bundle to use. You will run the following command to proceed to build our Vue bundle bundle as a module so we can import and use.

Write unit tests for the Vue instance

I usually use Jest to write unit tests, so this time I will also use Jest .

I will only check the following 2:

  1. The value of must be the same as vm. $
  2. When updates, vm. $ must also be updated.

To run the test I will use the command

After running we will get the result as shown below.

After running unit tests, if you get a PASS , you have completed the initial step of creating a Vue instance.


In this part 2, I have instructed you to prepare for your own Vue and write unit tests to check if the Vue instance is working properly.

In the next section, I will continue to talk about VNode, how does VNode render DOM DOM? When the state updates, how will the DOM update too!

Thank you for reading this part 2. I hope it helps you understand Vue.

Share the news now

Source : Viblo