How to parse the underlying logic of vue files

This time I will show you how to analyze the underlying logic of the vue file, and what are the precautions for the underlying logic of the vue file. 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
})

The parseComponent method defines two functions, start``end, and then calls the parseHTML method to compile the contents of the .vue file.

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 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:

How to use js to convert images to base64

How to use .native modification in Vue.js symbol

The above is the detailed content of How to parse the underlying logic of vue files. For more information, please follow other related articles on the PHP Chinese website!