preface

Vue is actually built into two versions, namely the full version: Runtime + Compiler and runtime version: Runtime. What’s the difference between the two versions?

If we open the Vue official website, we can see that Vue provides us with a compile function, passing in the HTML string to get two rendering functions.

Notice what’s in boldThe full version is availableCan only be used in runtime+compiler build mode.

Since the full version requires compiler participation, traditional HTML JS written this way would take a long time to compile each time the project is run.

Most of our current projects (webpack\vite and other packaging tools) basically only have the Runtime phase, while the compile phase is done by plug-ins like vue-loader during the pre-compile phase of the project

But in order to better learn (surface) study (try) source (blow) code (ox) 🤩, so we still need to understand the principle and learn a good code style.

The body of the

Start by preparing the source code for vue2.x, which may vary from version to version; the version used here is 2.6.14

We know that vue compilation is divided into three phases:

  • Template parsing stage: a bunch of template strings are parsed into abstract syntax tree AST (parser) by means of re, etc.

  • Optimization phase: Traverse the AST to find the static nodes and mark them (optimizer)

  • Code generation phase: Convert the AST into a rendering function (code generator)

Below we will understand the compile stage step by step according to the file call order in the source code, what vue does.

Multi map warning ⚠️ fear map very!!

Entrance to the file

Start with the entry file SRC /platforms/web/entry-runtime-with-compiler.js

  1. The render function is used to return the DOM.

  2. Otherwise, get the template template. Focus on the picture notes

  3. Then you go to compileToFunctions, which return the Render function and staticRender function to generate the VDOM

Generating the Render function

When you go to compileToFunctions, the createCompiler function is called

CreateCompiler createCompiler createCompilerCreator is called.

This returns an object CompiledResult that returns properties such as Render and staticRender and AST. This object is of type CompiledResult:


declare type CompiledResult = {

  ast: ?ASTElement;

  render: string;

  staticRenderFns: Array<string>; stringRenderFns? :Array<string>; errors? :Array<string | WarningMessage>; tips? :Array<string | WarningMessage>;

};

Copy the code

So if I go to createCompilerCreator, I find that through the function closure, I’ve returned an object that has two functions, compile and compileToFunctions, and in compile, Execute the baseCompile function parameter passed in createCompilerCreator to compile the three processes. The specific code is as follows.

So the most important thing to compile is the compile function, which we can see is called by the second compileToFunctions to compile the render function.

The function thus begins the three stages of compilation

  • Vue parses the template template into an AST tree using the HTMLParse library.

  • The static node is treated as a constant by the optimize tag and is not updated while making the VDOM diff.

  • Generate the render function and staticRenderFns function to generate the virtual DOM later

The specific code of these three processes can be viewed by themselves, not described here. Let’s focus on generate

The staticRenderFns function is statically tagged earlier by mounting the vm to the _c instance method (which calls createElement) and then returning the Render string as a wrap with(). So I’m just going to take the staticRenderFns in state. ☠ ️

InstallRenderHelpers is called in core/instance/render. Js renderMixin is called in installRenderHelpers

HTMLParse, optimize how to do static markup, render string generation is not explored in depth, there will be a chance to explore later! 🤣

Vue template AST tag details are available

Afterword.

How does Vue convert the render function into a virtual DOM since we get the render function from the compile phase and the Runtime phase? 😎

In new Vue(), the Vue calls initRender and createElement (_c). This method returns a _createElement method to recursively create the Vnode tree. The code is in core/vdom/index.js.

Instantiation process

InitMixin method:

After the VDOM is generated, vUE performs data hijacking and other operations on data, among others. At this point, Vue is in the Created phase, and data and VDOM are ready.

✍️ Combination of Chinese and Western curative effect is good

Finally, combining Vue life cycle diagram, we can better understand the whole life cycle function process of Vue

The views expressed in ✋ are solely those of the author