vue での .vue ファイル解析手順の詳細な説明

今回は、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
})

parseComponent メソッドは 2 つの

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 サイトの他の関連記事に注目してください。

推奨読書:

vue webpackの使用例の詳細な説明

reactはantdコンポーネントと連携してバックエンドシステムを作成します

Vue.jsでの.native修飾子の使用の詳細な説明

以上がvue での .vue ファイル解析手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。