The official version of VUe3 has been released for a long time, but I haven’t had a chance to use it. This week, I used VUe3 to write a little page, and I was curious about the source code of VUe3, so I took advantage of Saturday to learn a wave of source code of VUe3. I won’t talk about vue3 here, just focus on its source code.

Vue architecture

The diagram above shows an architecture of the VUE code, consisting mainly of three modules. It is mainly the module related to program runtime, responsive module, and the module related to program compilation. Today, we’ll start with the Runtime-DOM because we’re going to learn about the initialization process.

createApp

We know that vue3 does not initialize the project with new Vue, but with createApp().mount(), so we have to find createApp to understand the initialization process.

This function is in the run-time dom module SRC /index.ts

App is an instance of that application that is created with the ensureRenderer method and has a mount method available to us.

So one should again look at ensureRenderer

Renderer is a singleton, and the ensureRenderer method will see if the renderer is ensureRenderer or not created, and if not, createRenderer will be called to create the renderer. The renderer is the actual creator of the instance. So it’s back to the createRenderer method.

Okay, it’s a little bit convoluted, so you have to go back to baseCreateRenderer.

(Check out the baseCreateRenderer method, which has 1800 lines, so I won’t post them here.)

This method is a factory function, so notice what it returns.

So createAppApi is where the application is created.

There’s an app in there that’s an instance of that app, it’s an object that has properties in it. There are some familiar faces in it, such as use, mixin, Component and directive. This is the difference with vue2.

  1. Previously vue2 was static and could easily be polluted by global configuration. Now instance methods are not.
  2. Some of the methods that vuE2 doesn’t use will also be packaged, but vuE3 won’t.
  3. It is logical to create an instance to call the methods in the instance. You can also do chain calls.

Let’s focus on the mount method here

It’s not hard to see here that you need to look at the render function, which converts the virtual DOM to the real DOM. The render method is an argument to createAppAPI, so we’ll have to go back to the Render method

The patch method will pass null as the first parameter when we do not mount the vNode and container

This method determines what type we’re passing in. So how do I know which type I’m going to initialize it to. Based on my debugging on the browser, it determines that we passed in a Component. So let’s go with the process, and the code behind it is more complicated. Let’s look at the key code behind it, the setupRenderEffect method.

I didn’t post all the code here, just two places. First, calculate the vNode corresponding to the current DOM tree, and then pass in the patch function, which is the function to convert the virtual DOM.

This is the vuE3 initialization process. After reading a word feeling is around, around, but in the inside of the carefully look and feel the logic of careful, can only say that especially yuxi niubi.

Write a short version of the initialization process

See is finished, also felt the cow force, that how to learn it, you have to imitate to write a simple version out

So let’s start writing by hand. The first step is definitely to create an HTML file and create a VUE instance that mimics the vUE initialization process.

For the first step, we need a vue that has a createApp method in it. This method, according to the source code, actually returns the createApp method in the renderer instance

The second step, of course, is to declare the renderer

As you can see, it can do more than just manipulate the DOM, it can do anything, depending on what you pass in. In fact, you can customize the operation, such as drawing canvas

The third step is to define the createRenderer function

Step 4, define the createAppApi method

So, a structure of the whole has come out

This is the general flow of vuE3 initialization, and it is fairly clear.

It’s the Renderer that actually creates the app within the createApp method. And then the renderer is created by the createRenderer method. It returns a Render and createApp. This createApp is created by this createAppApi method. After this method receives Render, create an app and define the mount method. Mount will call the render function in the future. Convert a VNode to a real DOM. With that in mind, let’s go through our simple initialization method.

This is my easy way, which is to parse the VNode and display it on the page. So let’s verify that

Here you can see that our vNode has been added to the page. My simple VUE initialization process is complete.

conclusion

In fact, if you look at the source code like I’m going to look at the source code of the initialization process, you have to look at how it’s used. For example, if vue3 initializes createApp, go to the source code for createApp and step by step step down. Although aftertaste feels quite convoluted, but when I watched it, there was no such feeling. In fact, you will soon forget after reading, so strike while the iron is hot to achieve a simple version of their own. Can consolidate the idea of the source code, not so soon forget.

Today I finished the vue3 initialization process learning, feeling it is not difficult or a little round, next time I will continue to learn the core part of VUe3, responsiveness!

(ps: nuggets this code block is how to use, I copied from vscode after the release of the code is displayed in a line, so I changed the picture, there is no big guy to teach me.)