generate

Generate instantiates CodegenState and generates code from genElement(ast, state), wrapping code in render with(this){return ${code}}}.

CodegenState

CodegenState initializes the compile state of the instance, because this function initializes properties of the instance. Obviously, it adds a lot of properties to the instance, such as this.xxxx.

  • dataGenFns
  • directives

Deposit which is an array, the Vue own instruction only belongs to the processing function, including the processing function v – on the following instructions: binding events v – bind: binding properties v – cloak: compile hidden DOM v – before the model: two-way binding v – text: insert text v – HTML: When you use the above instructions in a template, Vue will call the corresponding function to process them first

  • staticRenderFns

An array that holds the render function of the static root node, unique to each instance and null if there is no static root node.

genElement

As you can see, it’s basically recursive to determine the attributes of the current AST element node and perform different code generation functions. Don’t try to read all at once, read according to the scene.

GenStatic Handling of static nodes

template

ast

code

process

conclusion

1. GenElement checks whether the EL node has a staticRoot flag and starts with staticProcessed false. If both conditions are met, genStatic is called.

GenStatic static static static static static static static static static static static static static static static static static static static static static static static static static static static static static static

GenElement {staticProcessed true}; genData {genChildren}; Iterate over children to execute genNode. If the child node type is 1, it is an element node and continue to execute genElement. If it is not an element node or a comment node, genText is called to determine whether to return the corresponding encoding for the expression.

4. The final code is obtained after the final traversal. For static nodes, this code is stored in staticRenderFns.

GenOnce processing of V-once

template

ast

code

process

1. Execute genElement first to genData, then to genChildren, then to genCode, since it is an element node, so continue to execute genElement.

2. The el has the once flag, and at first onceProcessed is false, and the genOnce function is called.

3. GenOnce first sets onceProcessed to true if no el.if &&! The el. IfProcessed and EL. StaticInFor conditions do not meet genStatic(el, state).

GenStatic first set staticProcessed to true, then drop genElement to staticRenderFns and return the result. In the last render, children returns _m(staticrenderfs.length-1).

If staticProcessed is true then genElement, genData parsing, genChildren, Iterate over children to execute genNode. If the child node type is 1, it is an element node and continue to execute genElement. If it is not an element node or a comment node, genText is called to determine whether to return the corresponding encoding for the expression.

6. The final code is obtained after the final traversal. For static nodes, this code is stored in staticRenderFns.

genFor

template

ast

code

process

1. Execute genElement to genData and then execute genChildren because el.for exists, so execute genElement.

2. If el has a for flag, and forProcessed is false at first, call genFor.

Int el.for, el.alias, and el.iterator1; genFor: int el.for, el.alias, and el.iterator1; genFor: int el.for, el.alias, and el.iterator1 Then implement genElement.

If staticProcessed is true, then genChildren will be processed. Iterate over children to execute genNode. If the child node type is 1, it is an element node and continue to execute genElement. If it is not an element node or a comment node, genText is called to determine whether to return the corresponding encoding for the expression.

6. The final code is obtained after the final traversal.

genIf

template

ast

code

process

1. Execute genElement to genData and then execute genChildren because el.for exists, so execute genElement.

If processed is false, the genIf function is called.

3. GenIf first sets ifProcessed to true and then executes the genIfConditions function to pass in el.ifconditions.slice ().

4. If condition does not exist, return ‘_e()’, otherwise derive one digit from conditions.shift(), if condition has an expression, return a ternary expression, condition? GenTernaryExp -> also known as genElement parsing node: genIfConditions again executes genIfConditions. If no expression exists, genTernaryExp is directly called to parse the node.

5. The final code is obtained after the final traversal.

Class and style

template

ast

code

process

1. First, execute genElement outer tag without identifier directly to genData and then execute genChildren, because there is no identifier directly to genData.

2. At this point, genData performs dataGenFns processing on el, which is used by the platform to process class and style, and finally returns the object.

If the child node type is 1, it indicates that it is an element node to continue to execute genElement. If it is not an element node or a annotation node, genText is called to determine whether to return the corresponding encoding for the expression.

conclusion

From the ast -> code step, we have some knowledge by parsing some instructions, the compiled generated code is the code executed at render. As genCode has a lot of content, the general idea is the same, but according to different node attributes to go through different processes to generate different results, and finally a string spliced together. As for Slot and the incident, which we’ll talk about separately later, another brain-burning day. Gas workers.