Vue3 compilation process-source code analysis

Preface:

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

I have also done some simple reading of the source code of Vue2.x. Since the reconstruction of Vue3, the directory structure of the Vue project has also changed a lot. Each functional module has been placed in the packages directory, and the responsibilities are clearer, which can be seen at a glance through the directory name. Today we will start with the Vue entry file and see how a single Vue file is declared and compiled into a rendering function compile-core core module.

For your convenience and to control the length of the article, I will fold the logic that you don't need to pay much attention to when reading the source code, or ignore it through comments such as /* Ignore logic */.

Personally, I don’t like to see a long section of code right at the beginning when reading a source code analysis article, which can easily confuse students who haven’t read it. So in this series of articles I will try to draw a flow chart for the key codes. The purpose is still the same, which is to help everyone reduce the cost of understanding, and at the same time provide students with a flow chart to refer to when they read independently next time.

1. Interpretation of Vue entry file

We will start our source code reading from the entry point of a Vue object, packages/vue/index.ts . The code of this entry file is relatively simple, with only one compileToFunction function, but the content in the function body is quite critical, so let's take a look at a picture first to understand what exactly this function body accomplishes.

After looking at the flowchart, let's look at the code together. I believe that most of the students may have a clear understanding of the code in the picture at this time.

Skip all the code and look at the last 35 lines of the file. The registerRuntiomCompiler function is called and the compileToFunction function is passed in as a parameter. This line of code corresponds to the beginning of the flowchart. compile function is injected into runtime through dependency injection. Dependency injection is a clever way of decoupling. At this time, calling the compile compilation function at runtime is calling the current compileToFunction function.

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

<template>
  <div>
    Hello World
  </div>
</template>

After compiling this simple template, 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 mystery inside 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 a parameter 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 find that render function is a curried function that returns a function that extends the scope chain through with.

Finally, the entry file returns the render variable and caches the render function.

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

At this point, the entry file of package/vue/index.ts has been interpreted. I believe everyone has seen that the most interesting part is calling the compile function to compile the code string, so I will continue to talk about compile function next. The compile function involves two modules: compile-dom and compile-core . In this article, I will only explain the key processes. The detailed analysis will be included in subsequent articles. Let's take a look at the running process of compile:

2. Compile operation process

compile function directly returns the result of the baseCompile function. During the execution, the baseCompile function generates an AST abstract syntax tree 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 used by the generate function to generate the code string mentioned above and return the compilation result. At this point, compile function is executed. After understanding the general process, let's look at the source code.

The source code path of the compile function is packages/compiler-dom/src/index.ts . We can see that in the body of the compile function, the processing result of baseCompile is directly returned. The source code path of baseCompile is packages/compiler-core/src/compile.ts . Why is baseCompile named like this? Because compile-core is the core module of compilation, it accepts external parameters to complete compilation according to the rules, and compile-dom is specifically used to handle 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-level compiler than baseCompile . For example, when Vue works in native apps such as weex on iOS or Android, compile-dom may be replaced by the relevant mobile compilation library.

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

First, from the function declaration, baseCompile receives the template template and the options compilation options processed by the upper-level high-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 , we can clearly see that the returned result contains the code string, the processed AST abstract syntax tree, and sourceMap.

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

The next source code is line 16, which calls the transform function and passes in tool functions such as instruction conversion and node conversion to transform the AST generated by the template.

Finally, in line 32, we pass the converted AST to generate and generate a return result of type CodegenResult .

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

This article explains the general process of compilation starting from the entry file, hoping to help everyone have a clear concept of the process when reading the code of this module of the compiler, and it will be more interesting to read it with the flowchart.

This is the end of this article about Vue3 compilation process - source code analysis. For more relevant Vue3 compilation process content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!