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

This article will explain in detail the sample analysis of .vue file parsing in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Vue provides a compiler.parseComponent (file, [options]) method to parse the .vue file into a descriptor:

/ / an object format describing a single-file component.declare type SFCDescriptor = {template:? SFCBlock; script:? SFCBlock; styles: Array; customBlocks: Array;}

File entry

The entry for parsing the sfc file is in src/sfc/parser.js, which export the parseComponent method, and the parseComponent method is used to compile the single file component.

Let's take a look at what the parseComponent method does.

ParseComponent method

Function start (tag, attrs, unary, start, end,) {} function end (tag, start, end) {} parseHTML (content, {start, end})

Two start`end functions are defined in the parseComponent method, and then the parseHTML method is called to compile the contents of the .vue file.

So what does this parseHTML method do?

ParseHTML method

This method knows by name that it is a html-parser, which can be simply understood as: when parsing to each starting tag, calling start; in option calls end in option at the end of each tag.

This corresponds to calling the start and end functions defined in the parseComponent method, respectively.

Maintain a depth variable in parseComponent, depth++ in start and depth-- in end. So, the tag for each depth = = 0 is the information we need to get, including template, script, style, and some custom tags.

Start

Whenever a starting tag is encountered, the start function is executed.

1. Record the currentBlock.

Each currentBlock contains the following:

Declare type SFCBlock = {type: string; content: string; start?: number; end?: number; lang?: string; src?: string; scoped?: boolean; module?: string | boolean;}

2. According to the tag name, put the currentBlock object in the returned result object.

The return object is defined as sfc, and if tag is not any of the script,style,template, it is placed in sfc.customBlocks. If it's style, put it in sfc.styles. Script and template are placed directly under sfc.

If (isSpecialTag (tag)) {checkAttrs (currentBlock, attrs) if (tag = 'style') {sfc.styles.push (currentBlock)} else {sfc [tag] = currentBlock}} else {/ / custom blocks sfc.customBlocks.push (currentBlock)}

End

Whenever a closing tag is encountered, the end function is executed.

1. If it is currently the first layer label (depth = 1) and the currentBlock variable exists, take out this part of the text and put it in the currentBlock.content.

If (depth = 1 & & currentBlock) {currentBlock.end = start let text = deindent (content.slice (currentBlock.start, currentBlock.end)) / / pad content so that linters and pre-processors can output correct / / line numbers in errors and warnings if (currentBlock.type! = = 'template' & & options.pad) {text = padContent (currentBlock, options.pad) + text} currentBlock.content = text currentBlock = null}

2 、 depth-- .

Get descriptor

After traversing the entire .vue, the resulting sfc object is the result we need.

Generate .js?

Compiler.parseComponent (file, [options]) only gets the SFCDescriptor of a component, and the final compilation into .js files is handed over to libraries such as vue-loader.

This is the end of this article on "sample analysis of .vue file parsing in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.