Heim > Artikel > Web-Frontend > 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!