Detaillierte Erläuterung der Schritte zum Parsen von .vue-Dateien in vue

Dieses Mal werde ich Ihnen die Schritte zum Parsen von .vue-Dateien in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Parsen von .vue-Dateien in Vue? .

Die .vue-Dateien, die wir normalerweise schreiben, werden SFC (Single File Components) genannt. Dieser Artikel stellt vor, wie der Prozess des Parsens von SFC in Deskriptoren in Vue durchgeführt wird.

vue stellt eine Methode „compiler.parseComponent(file, [options])“ bereit, um die .vue-Datei in einen Deskriptor zu analysieren:

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

Dateieintrag

Der Einstiegspunkt zum Parsen von SFC-Dateien befindet sich in src/sfc/parser.js. Diese Datei exportiert die Methode parseComponent, die zum Kompilieren einzelner Dateikomponenten verwendet wird.

Als nächstes schauen wir uns an, was die parseComponent-Methode bewirkt.

parseComponent-Methode

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

parseComponent-Methode definiert start``end zwei Funktionen und ruft dann die parseHTML-Methode auf, um den Inhalt der .vue-Datei zu analysieren Übungszusammenstellung.

Was macht diese parseHTML-Methode?

parseHTML-Methode

Sie können anhand des Namens erkennen, dass es sich bei dieser Methode um einen HTML-Parser handelt. Es kann einfach verstanden werden, dass beim Parsen jedes Start-Tags die Option Die Option „in“ wird am Ende jedes Etiketts aufgerufen.

entspricht hier dem Aufruf der jeweils in der parseComponent-Methode definierten Start- und Endfunktionen.

Behalten Sie eine Tiefenvariable in parseComponent bei, legen Sie Depth++ in Start und Depth-- in End fest. Dann ist jedes Tag mit der Tiefe === 0 die Informationen, die wir erhalten müssen, einschließlich Vorlage, Skript, Stil und einigen benutzerdefinierten Tags.

start

Immer wenn ein Start-Tag angetroffen wird, wird die Startfunktion ausgeführt.

1. Zeichnen Sie den aktuellenBlock auf.

Jeder currentBlock enthält den folgenden Inhalt:

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

2. Fügen Sie entsprechend dem Tag-Namen das currentBlock--Objekt in das zurückgegebene Ergebnisobjekt ein.

Das zurückgegebene Ergebnisobjekt ist als sfc definiert. Wenn das Tag kein Skript, kein Stil oder keine Vorlage ist, wird es in sfc.customBlocks platziert. Wenn es sich um einen Stil handelt, fügen Sie ihn in sfc.styles ein. Skript und Vorlage werden direkt unter sfc platziert.

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

Führen Sie die Endfunktion aus, wenn ein End-Tag gefunden wird.

1. Wenn die aktuelle Beschriftung die erste Ebene ist (Tiefe === 1) und die Variable currentBlock vorhanden ist, nehmen Sie diesen Teil des Textes heraus und fügen Sie ihn in currentBlock.content ein.

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. Tiefe-- .

Deskriptor abrufen

Nach dem Durchlaufen der gesamten .vue ist das erhaltene SFC-Objekt das Ergebnis, das wir benötigen.

.js generieren?

compiler.parseComponent(file, [options]) ruft nur den SFCDescriptor einer Komponente ab. Die endgültige Kompilierung in eine .js-Datei erfolgt durch Bibliotheken wie vue-loader.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Vue-Webpack-Anwendungsfälle

React arbeitet mit antd-Komponenten zusammen, um ein Backend-System aufzubauen

Detaillierte Erläuterung der Verwendung des .native-Modifikators in Vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Parsen von .vue-Dateien in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!