vue中.vue文件解析的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)vue中.vue文件解析的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue 提供了一個(gè) compiler.parseComponent(file, [options]) 方法，來(lái)將 .vue 文件解析成一個(gè) descriptor：

// 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 中，該文件 export 了 parseComponent 方法， parseComponent 方法用來(lái)對(duì)單文件組件進(jìn)行編譯。

接下來(lái)我們看看 parseComponent 方法都做了哪些事情。

parseComponent 方法

function start(tag, attrs, unary, start, end,){
}

function end(tag, start, end){
}

parseHTML(content, {
  start,
  end
})

parseComponent 方法中定義了 start``end 兩個(gè)函數(shù)，之后調(diào)用了 parseHTML 方法來(lái)對(duì) .vue 文件內(nèi)容踐行編譯。

那么這個(gè) parseHTML 方法是做啥的呢？

parseHTML 方法

該方法看名字就知道是一個(gè) html-parser，可以簡(jiǎn)單理解為，解析到每個(gè)起始標(biāo)簽時(shí)，調(diào)用 option 中的 start；每個(gè)標(biāo)簽結(jié)束時(shí)，調(diào)用 option 中的 end。

對(duì)應(yīng)到這里，就是分別調(diào)用 parseComponent 方法中定義的 start 和 end 函數(shù)。

在 parseComponent 中維護(hù)一個(gè) depth 變量，在 start 中將 depth++ ，在 end 中 depth-- 。那么，每個(gè) depth === 0 的標(biāo)簽就是我們需要獲取的信息，包含 template、script、style 以及一些自定義標(biāo)簽。

start

每當(dāng)遇到一個(gè)起始標(biāo)簽時(shí)，執(zhí)行 start 函數(shù)。

1、記錄下 currentBlock。

每個(gè) currentBlock 包含以下內(nèi)容：

declare type SFCBlock = {
  type: string;
  content: string;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
};

2、根據(jù) tag 名稱，將 currentBlock 對(duì)象在返回結(jié)果對(duì)象中。

返回結(jié)果對(duì)象定義為 sfc，如果tag不是 script,style,template 中的任一個(gè)，就放在 sfc.customBlocks 中。如果是style，就放在 sfc.styles 中。script 和 template 則直接放在 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

每當(dāng)遇到一個(gè)結(jié)束標(biāo)簽時(shí)，執(zhí)行 end 函數(shù)。

1、如果當(dāng)前是第一層標(biāo)簽(depth === 1)，并且 currentBlock 變量存在，那么取出這部分text，放在 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、depth-- 。

得到 descriptor

在將 .vue 整個(gè)遍歷一遍后，得到的 sfc 對(duì)象即為我們需要的結(jié)果。

生成 .js ？

compiler.parseComponent(file, [options]) 得到的只是一個(gè)組件的 SFCDescriptor ，最終編譯成.js 文件是交給 vue-loader 等庫(kù)來(lái)做的。

關(guān)于“vue中.vue文件解析的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。