今回は、vue で .vue ファイルを解析する手順について詳しく説明します。vue で .vue ファイルを解析する際の 注意事項 は何ですか?実際のケースを見てみましょう。
私たちが通常作成する .vue ファイルは、SFC (Single File Components) と呼ばれます。この記事では、SFC を記述子に解析するプロセスが vue でどのように実行されるかを紹介します。 vue は、.vue ファイルを記述子に解析するための COMPiler.parseComponent(file, [options]) メソッドを提供します:// an object format describing a single-file component. declare type SFCDescriptor = { template: ?SFCBlock; script: ?SFCBlock; styles: Array<SFCBlock>; customBlocks: Array<SFCBlock>; };
ファイル エントリ
sfc ファイルを解析するためのエントリは src/sfc/parser.js にあります、このファイルは、単一ファイルのコンポーネントをコンパイルするために使用される parseComponent メソッドをエクスポートします。 次に、parseComponent メソッドの動作を見てみましょう。parseComponent メソッド
function start(tag, attrs, unary, start, end,){ } function end(tag, start, end){ } parseHTML(content, { start, end })
functionsstart``end を定義し、parseHTML メソッドを呼び出して .vue ファイルのコンテンツをコンパイルします。
では、この parseHTML メソッドは何をするのでしょうか?
parseHTML メソッド
このメソッドは HTML パーサーであることがわかります。各開始タグを解析するときに、各タグの終了時にオプションの start を呼び出します。最後に。
ここで対応するのは、parseComponent メソッドで定義された start 関数と end 関数をそれぞれ呼び出すことです。
parseComponent で Depth 変数を維持し、start と Depth--in end で Depth++ を設定します。次に、深さ === 0 の各タグは、テンプレート、スクリプト、スタイル、およびいくつかのカスタム タグを含む、取得する必要がある情報です。
start
開始タグが見つかると、start 関数が実行されます。
1. 現在のブロックを記録します。
各 currentBlock には次のコンテンツが含まれます:
declare type SFCBlock = { type: string; content: string; start?: number; end?: number; lang?: string; src?: string; scoped?: boolean; module?: string | boolean; };
2. タグ名に従って、返された結果オブジェクトに currentBlock object を入れます。
返された結果オブジェクトは、タグがスクリプト、スタイル、テンプレートのいずれでもない場合、sfc.customBlocks に配置されます。 styleの場合はsfc.stylesに入れます。スクリプトとテンプレートは 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
終了タグが見つかると、end 関数が実行されます。
1. 現在のラベルが最初のレイヤー (深さ === 1) で、currentBlock 変数が存在する場合、テキストのこの部分を取り出して 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、深さ--。
記述子の取得
.vue 全体を走査した後、取得された sfc オブジェクトが必要な結果です。
.js を生成しますか?
compiler.parseComponent(file, [options]) は、コンポーネントの SFCDescriptor のみを取得します。.js ファイルへの最終的なコンパイルは、vue-loader などのライブラリによって行われます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
reactはantdコンポーネントと連携してバックエンドシステムを作成します
以上がvue での .vue ファイル解析手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。