Source code analysis usually starts at the entry point, but this time it will go straight to the core and work its way from the inside out to the source. More in line with the thinking of the analysis.

At the heart of parsing is the parseHTML function, which parses the string template of template character by character using a while loop and regular expressions.

The script/style/textarea tags are specially treated when parsing Vue templates. So, in general, compiled string tags fall into two categories

The script/style/textarea label

TextEnd = html.index(“<“), which uses the textEnd variable to distinguish between text nodes.

Text node:

1 < 2

Other element nodes:

    1. Comment node

    2. Conditional comment nodes

    http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment

    3. The label

    4. Close the label

    Advance: index is the current parsing position, and the while loop terminates when the HTML is parsed to an empty string

    **endTagMatch[1] is the current tag name, curIndex is the actual position of the closed tag string, and index is the end position of the closed tag string (advance has changed index).

    Use stack to store labels in the resolution, for example, template as

    The end function is then called to generate the AST node.

    5. Start a label

    HandleStartTag function: by using the attribute/dynamicAttribute regular to parse the attributes and their values, then put the label into the stack.

    In addition, since the label may be self-closing, for example, such labels do not need to be pushed.

    Next, update the lastTag to the tag being parsed at this point.

    Finally, the start function is called to generate the AST node.

    6. Text elements

    When parsing text elements, consider the presence of the < symbol in the text element. Given that tag start/end/comment node/conditional comment node all have a < symbol, the text will continue to parse if the re does not meet the above conditions.

    Finally, the chars function is called to process the text nodes.

    The script/style/textarea label

    For these three elements, the template is parsed to treat everything in those elements as strings. The replace function is used to process the inner part of the string, and then the chars function is called.

    Finally, the index and HTML are updated, and the parent element closing tag is processed. See the notes for details.

    html=last

    parseEndTag()

    Use the parseEndTag function with no passed arguments to clear the internal stack.

    The last

    In fact, the Vue template compilation section looks very long, but in fact it is nothing.

    The real essence is

    1. Write a correct regular expression

    2. Use the stack structure to ensure that labels are parsed correctly

    3. Use the while loop

    In addition, the parseHTML at the beginning of the article contains the template and options parameters. Template is the string we write for the template, and options contains a lot of parameters. Options. Start /end/chars is called when parsing the start/end tag/text node. The following part will parse this part and analyze how Vue converts the parseable characters into AST nodes.