Shulou(Shulou.com)06/03 Report--

This article is to share with you about the Vue3 compilation process of the source code is how, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, say no more, follow the editor to have a look.

Foreword:

Vue3 has been released for a long time, and recently there is an opportunity to use the technology stack of Vue3 + TypeScript + Vite in the company's project, so I also take the time to read the source code of Vue3 in my spare time. In line with the idea that a good memory is not as good as a bad head, I took some notes while reading the source code. I also hope to try to write some source code reading notes to help every student who wants to see the source code but may have difficulties to reduce the cost of understanding.

Vue2.x source code I have also had some simple reading, since the Vue3 restructuring, the directory structure of the Vue project has also undergone great changes, each functional module has been put into the packages directory, the responsibilities are more clear, through the directory name can be clear at a glance. Today we will start with the entry file of Vue and see how a single file of Vue is compiled into a rendering function by the compile-core compilation core module after declaring a single file.

For the convenience of reading, and to control the length of the article, I will fold the logic that I don't need to care about when reading the source code, or ignore it through comments / * ignore logic * /.

Personally, I don't like to produce a large piece of code as soon as I read the source code analysis article, which is easy to confuse the students who haven't read it. So in this series of articles, I will try to draw a flow chart of the key code. The purpose is still one, to help you reduce the cost of understanding, but also to allow students to have a flow chart for reference when they read independently next time.

1. Interpret the Vue entry file

We will start our source code reading, packages/vue/index.ts, from the entrance of a Vue object. The code of this entry file is relatively simple, there is only one compileToFunction function, but the content of the function body is more critical, so first look at a picture to understand what this function body has accomplished.

After reading the flow chart, let's take a look at the code together. I believe most of the students may know the code in the picture at a glance at this time.

Directly skip all the code, look at the end of the file 35 lines, called the registerRuntiomCompiler function, the compileToFunction function as a parameter, this line of code is corresponding to the beginning of the flowchart, through the way of dependency injection, the compile function is injected into the runtime runtime, dependency injection is a more ingenious way of decoupling, when the runtime calls the compile compiler function, it is calling the current compileToFunction function.

Looking at line 17 of the code, the compile function provided by the compile-dom library is called, and the code variable is deconstructed from the return value. This is the compilation result generated after the compiler executes. Code is one of the parameters of the compilation result, which is a code string. such as

Hello World

For this simple template, after compilation, the string returned by code is

Const _ Vue = Vue return function render (_ ctx, _ cache) {with (_ ctx) {const {openBlock: _ openBlock, createBlock: _ createBlock} = _ Vue return (_ openBlock (), _ createBlock ("div", null, "Hello World"))}}

I will explain the inner mysteries of this magical compile function in detail later.

After getting the result of this code string, we look down the code, line 25 declares a render variable, and passes the generated code string code as an argument to the new Function constructor. This is the penultimate step in the flowchart, generating the render function. You can format the code string I put above, and you can find that the render function is a Corey function that returns a function that extends the scope chain through with inside.

In the end, the entry file returns the render variable and caches the render function.

In line 1 of the source code above, we see that the entry file creates a compileCache object to cache the render function generated by the compileToFunction function, takes the template parameter as the cached key, and has an if branch at line 11 to determine the cache. If the template has been cached before, it will no longer be compiled and directly return to the render function in the cache to improve performance.

At this point, the entry file of package/vue/index.ts is finished. As you can see, the most interesting part is that the code string is compiled by calling the compile function, so I'm going to talk about it around the compile function. The compile function involves two modules, compile-dom and compile-core, and I will only interpret the key processes in this article. Detailed analysis will be included in subsequent articles. Let's take a look at the running process of compile:

2. The running process of compile

The compile function directly returns the result of the baseCompile function, while the baseCompile function generates the AST abstract syntax tree during execution, and calls transform to process each AST node, such as converting vOn, v-if, v-for and other instructions. Finally, the processed AST abstract syntax tree is generated through the generate function to generate the code string mentioned earlier, and return the compilation result, so that the compile function is completed. After you understand the general process, move on to the source code.

The source path of the compile function is packages/compiler-dom/src/index.ts. We can see that the processing result of baseCompile is directly return in the body of the compile function. The source path of baseCompile is packages/compiler-core/src/compile.ts. Why is there a name like baseCompile? Because compile-core is the core module of compilation, it accepts external parameters to complete the compilation according to the rules, while compile-dom specially deals with the compilation in browser scenarios. The compile function exported under this module is the compilation function actually received by the entry file. The compile function in compile-dom is also a higher-order compiler than baseCompile. For example, when Vue works in weex in Native App such as iOS or Android, compile-dom may be replaced by relevant mobile compilation libraries.

Let's take a look down at the baseCompile function:

First, from the function declaration, baseCompile receives the template template and handles the options compilation option in the upper-level compiler, and finally returns a compilation result of type CodegenResult.

Export interface CodegenResult {code: string preamble: string ast: RootNode map?: RawSourceMap}

Through the interface declaration of CodegenResult, you can clearly see the existence of code code string, processed AST abstract syntax tree, and sourceMap in the returned result.

Look at line 12 of the source code above to determine whether the template template is a string, and if so, the string will be parsed, otherwise template will be directly treated as AST. In fact, the single-file vue code that we usually write is passed in the form of a string.

Next, 16 lines of source code call the transform function, and pass in instruction conversion, node conversion and other tool functions to convert the AST generated by the template.

At the final position of 32 lines, we pass the converted AST into generate to generate a return result of type CodegenResult.

In the compile-core module, the functions AST parsing, transform, codegen, compile, and parse are all separate small modules, and the internal implementation is very subtle, which will be introduced one by one in subsequent articles of the compiler.

Starting from the entry file, this paper explains the general process of compilation, hoping to help you to have a clear process concept when reading the code of the compiler module, so that it can taste better with the flow chart.

The above is what the source code of the Vue3 compilation process is, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.