摘要：當(dāng)前正在處理的節(jié)點(diǎn)，以及該節(jié)點(diǎn)的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博

筆者系 vue-loader 貢獻(xiàn)者之一（#16）

vue-loader 源碼解析系列之一，閱讀該文章之前，請(qǐng)大家首先參考大綱 vue-loader 源碼解析系列之 整體分析

const path = require("path")
const parse = require("./parser")
const loaderUtils = require("loader-utils")

module.exports = function (content) {
  // 略
  const query = loaderUtils.getOptions(this) || {}
  // 略
  const parts = parse(content, filename, this.sourceMap, sourceRoot, query.bustCache)
  let part = parts[query.type]
  // 略
  this.callback(null, part.content, part.map)
}

大家可以看到，selector的代碼非常簡(jiǎn)單，
通過 parser 將 .vue 解析成對(duì)象 parts, 里面分別有 style, script, template?？梢愿鶕?jù)不同的 query, 返回對(duì)應(yīng)的部分。
很明顯那么這個(gè) parser 完成了分析分解 .vue 的工作，那么讓我們繼續(xù)深入 parser

const compiler = require("vue-template-compiler")
const cache = require("lru-cache")(100)

module.exports = (content, filename, needMap, sourceRoot, bustCache) => {
  const cacheKey = hash(filename + content)
  // 略
  let output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: "line" })
  if (needMap) {
    // 略去了生成 sourceMap 的代碼
  }
  cache.set(cacheKey, output)
  return output
}

同樣的，為了方便讀者理解主要流程，筆者去掉了部分代碼。

從上面代碼可以看到，.vue 解析的工作其實(shí)是交給了 compiler.parseComponent 去完成，那么我們需要繼續(xù)深入 compiler。
注意，這里 vue-template-compiler 并不是 vue-loader 的一部分，從 vue-template-compiler 的 npm 主頁(yè)可以了解到， vue-template-compiler 原來是 vue 本體的一部分
并不是一個(gè)多帶帶的 package。通過查看文檔可知，compiler.parseComponent 的邏輯在 vue/src/sfc/parser.js 里。

源碼如下

/**
 * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
 */
export function parseComponent (
  content: string,
  options?: Object = {}
 ): SFCDescriptor {
  const sfc: SFCDescriptor = {
    template: null,
    script: null,
    styles: [],
    customBlocks: []
  }
  let depth = 0
  let currentBlock: ?(SFCBlock | SFCCustomBlock) = null

  function start (
    tag: string,
    attrs: Array,
    unary: boolean,
    start: number,
    end: number
  ) {
    // 略
  }

  function checkAttrs (block: SFCBlock, attrs: Array) {
    // 略
  }

  function end (tag: string, start: number, end: number) {
    // 略
  }

  function padContent (block: SFCBlock | SFCCustomBlock, pad: true | "line" | "space") {
    // 略
  }

  parseHTML(content, {
    start,
    end
  })

  return sfc
}

parseComponent 里面有以下變量

處理對(duì)象 sfc

把 .vue 里的 css, javaScript, html 抽離出來之后，存放到找個(gè)這個(gè)對(duì)象里面

變量 depth

當(dāng)前正在處理的節(jié)點(diǎn)的深度，比方說，對(duì)于 來說，處理到 foo 時(shí)，當(dāng)前深度就是 3, 處理到