So analysieren Sie die zugrunde liegende Logik von Vue-Dateien

Dieses Mal zeige ich Ihnen, wie Sie die zugrunde liegende Logik einer Vue-Datei analysieren und welche Vorsichtsmaßnahmen für die zugrunde liegende Logik einer Vue-Datei gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 bietet eine Methode „compiler.parseComponent(file, [options])“ zum Parsen der .vue-Datei in einen Deskriptor:

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

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

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, nämlich dem Aufruf der 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. Aktuellen Block aufzeichnen.

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 das currentBlock-Objekt entsprechend dem Tag-Namen 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:

So verwenden Sie js, um Bilder in Base64 zu konvertieren

So verwenden Sie die .native-Modifikation in Vue .js Talisman

Das obige ist der detaillierte Inhalt vonSo analysieren Sie die zugrunde liegende Logik von Vue-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!