Detailed explanation of .vue file parsing steps in vue

This time I will bring you a detailed explanation of the steps for parsing .vue files in vue. What are the precautions for parsing .vue files in vue? . The following is a practical case, let's take a look.

The .vue files we usually write are called SFC (Single File Components). This article introduces how the process of parsing SFC into descriptors is performed in vue.

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<SFCBlock>;
  customBlocks: Array<SFCBlock>;
};

File entry

The entry point for parsing sfc files is in src/sfc/parser.js. This file exports the parseComponent method. The parseComponent method is used to compile single-file components.

Next 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
})

parseComponent method defines two functionsstart``end, and then calls the parseHTML method to parse the .vue file Content practice compilation.

So what does this parseHTML method do?

parseHTML method

You can tell from the name that this method is an html-parser. It can be simply understood that when each start tag is parsed, the option in option is called. start; at the end of each label, call the end in option.

Corresponding to this is to call the start and end functions defined in the parseComponent method respectively.

Maintain a depth variable in parseComponent, set depth in start and depth-- in end. Then, each tag with depth === 0 is the information we need to obtain, including template, script, style and some custom tags.

start

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

1. Record the currentBlock.

Each currentBlock contains the following content:

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 returned result object is defined as sfc. If the tag is not any of script, style, and template, it is placed in sfc.customBlocks. If it is 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 an end tag is encountered, the end function is executed.

1. If the current label is the first layer (depth === 1), and the currentBlock variable exists, then take out this part of the text and put it in 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 sfc object obtained is the result we need.

Generate .js?

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of vue webpack use cases

react cooperates with antd components to create a backend system

Detailed explanation of the use of .native modifier in Vue.js

The above is the detailed content of Detailed explanation of .vue file parsing steps in vue. For more information, please follow other related articles on the PHP Chinese website!