Explication détaillée des étapes pour analyser les fichiers .vue dans vue

Cette fois, je vais vous apporter une explication détaillée des étapes d'analyse des fichiers .vue en vue Quelles sont les précautions pour analyser les fichiers .vue en vue Voici des cas pratiques, jetons un coup d'oeil. .

Les fichiers .vue que nous écrivons habituellement sont appelés SFC (Single File Components). Cet article présente comment le processus d'analyse de SFC en descripteurs est effectué dans vue.

vue fournit une méthode compiler.parseComponent(file, [options]) pour analyser le fichier .vue en un descripteur :

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

Entrée de fichier

Le point d'entrée pour l'analyse des fichiers sfc se trouve dans src/sfc/parser.js. Ce fichier exporte la méthode parseComponent, qui est utilisée pour compiler des composants à fichier unique.

Voyons ensuite ce que fait la méthode parseComponent. La

méthode parseComponent

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

la méthode parseComponent définit start``end deux fonctions, puis appelle la méthode parseHTML pour analyser le fichier vue. le contenu est compilé.

Alors, que fait cette méthode parseHTML ?

Méthode parseHTML

Vous pouvez dire d'après le nom que cette méthode est un analyseur HTML. On peut simplement comprendre que lorsque chaque balise de début est analysée, l'option est activée. L'option in est appelée start ; à la fin de chaque étiquette, appelez l'option end in.

correspond ici à l'appel des fonctions start et end définies respectivement dans la méthode parseComponent.

Maintenez une variable de profondeur dans parseComponent, définissez la profondeur++ au début et la profondeur à la fin. Ensuite, chaque balise avec une profondeur === 0 correspond aux informations que nous devons obtenir, y compris le modèle, le script, le style et certaines balises personnalisées.

start

Chaque fois qu'une balise de début est rencontrée, la fonction de démarrage est exécutée.

1. Enregistrez le bloc actuel.

Chaque currentBlock contient le contenu suivant :

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

2 Selon le nom de la balise, placez l'objet currentBlock dans l'objet résultat renvoyé.

L'objet résultat renvoyé est défini comme sfc. Si la balise n'est pas un script, un style ou un modèle, elle est placée dans sfc.customBlocks. Si c'est du style, mettez-le dans sfc.styles. le script et le modèle sont placés directement sous 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

Chaque fois qu'une balise de fin est rencontrée, la fonction de fin est exécutée.

1. Si l'étiquette actuelle est le premier calque (profondeur === 1) et que la variable currentBlock existe, alors supprimez cette partie du texte et placez-la dans 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. profondeur--.

Obtenir le descripteur

Après avoir parcouru l'intégralité du .vue, l'objet sfc obtenu est le résultat dont nous avons besoin.

Générer .js ?

compiler.parseComponent(file, [options]) obtient uniquement le SFCDescriptor d'un composant La compilation finale dans un fichier .js est effectuée par des bibliothèques telles que vue-loader.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation de Vue Webpack

React coopère avec les composants antd pour créer un système backend

Explication détaillée de l'utilisation du modificateur .native dans Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!