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 メソッドは、start と end の 2 つの関数を定義し、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 オブジェクトを置きます。

返された結果オブジェクトは、タグがスクリプト、スタイル、テンプレートのいずれでもない場合、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 サイトの他の関連記事に注目してください。

推奨読書:

js を使用して画像を Base64 に変換する方法

Vue.js で .native 修飾子を使用する方法

以上がvue ファイルの基礎となるロジックを解析する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。