摘要：整體概覽源碼最終是向外部拋出一個的構(gòu)造函數(shù)，見源碼在源碼最開始，通過方法見源碼向構(gòu)造函數(shù)添加全局方法，如等，主要初始化一些全局使用的方法變量和配置實(shí)例化當(dāng)使用時，最基本使用方式如下此時，會調(diào)用構(gòu)造函數(shù)實(shí)例化一個對象，而在構(gòu)造函數(shù)中只有這句代

Vue源碼最終是向外部拋出一個Vue的構(gòu)造函數(shù)，見源碼：

function Vue (options) {
  this._init(options)
}

在源碼最開始，通過installGlobalAPI方法(見源碼)向Vue構(gòu)造函數(shù)添加全局方法，如Vue.extend、Vue.nextTick、Vue.delete等，主要初始化Vue一些全局使用的方法、變量和配置；

export default function (Vue){
    Vue.options = {
          .....
    }
    Vue.extend = function (extendOptions){
           ......
    }
    Vue.use = function (plugin){
           ......
    }
    Vue.mixin = function (mixin){
           ......
    }
    Vue.extend = function (extendOptions){
           ......
    }
}

當(dāng)使用vue時，最基本使用方式如下：

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

此時，會調(diào)用構(gòu)造函數(shù)實(shí)例化一個vue對象，而在構(gòu)造函數(shù)中只有這句代碼this.init(options)；而在init中(源碼)，主要進(jìn)行一些變量的初始化、option重組、各種狀態(tài)、事件初始化；如下：

Vue.prototype._init = function (options) {
    options = options || {}
    this.$el = null
    this.$parent = options.parent
    this.$root = this.$parent
      ? this.$parent.$root
      : this
    this.$children = []
    this.$refs = {}       // child vm references
    this.$els = {}        // element references
    this._watchers = []   // all watchers as an array
    this._directives = [] // all directives

    ...... // 更多見源碼

    options = this.$options = mergeOptions(
      this.constructor.options,
      options,
      this
    )

    // set ref
    this._updateRef()

    // initialize data as empty object.
    // it will be filled up in _initData().
    this._data = {}

    // call init hook
    this._callHook("init")

    // initialize data observation and scope inheritance.
    this._initState()

    // setup event system and option events.
    this._initEvents()

    // call created hook
    this._callHook("created")

    // if `el` option is passed, start compilation.
    if (options.el) {
      this.$mount(options.el)
    }
}

在其中通過mergeOptions方法，將全局this.constructor.options與傳入的options及實(shí)例化的對象進(jìn)行合并；而this.constructor.options則是上面初始化vue時進(jìn)行配置的，其中主要包括一些全局使用的指令、過濾器，如經(jīng)常使用的"v-if"、"v-for"、"v-show"、"currency"：

this.constructor.options = {
        directives: {
          bind: {}, // v-bind
          cloak: {}, // v-cloak
          el: {}, // v-el
          for: {}, // v-for
          html: {}, // v-html
          if: {}, // v-if
          for: {}, // v-for
          text: {}, // v-text
          model: {}, // v-model
          on: {}, // v-on
          show: {} // v-show
        },
        elementDirectives: {
          partial: {}, //  api: https://v1.vuejs.org/api/#partial
          slot: {} // 
        },
        filters: {  // api: https://v1.vuejs.org/api/#Filters
          capitalize: function() {}, // {{ msg | capitalize }}  ‘a(chǎn)bc’ => ‘Abc’
          currency: funnction() {},
          debounce: function() {},
          filterBy: function() {},
          json: function() {},
          limitBy: function() {},
          lowercase: function() {},
          orderBy: function() {},
          pluralize: function() {},
          uppercase: function() {}
        }
}

然后，會觸發(fā)初始化一些狀態(tài)、事件、觸發(fā)init、create鉤子；然后隨后，會觸發(fā)this.$mount(options.el)；進(jìn)行實(shí)例掛載，將dom添加到頁面；而this.$mount()方法則包含了絕大部分頁面渲染的代碼量，包括模板的嵌入、編譯、link、指令和watcher的生成、批處理的執(zhí)行等等，后續(xù)會詳細(xì)進(jìn)行說明；

在上面說了下，在Vue.prototype.$mount完成了大部分工作，而在$mount方法里面，最主要的工作量由this._compile(el)承擔(dān)；其主要包括transclude(嵌入)、compileRoot(根節(jié)點(diǎn)編譯)、compile(頁面其他的編譯)；而在這兒主要說明transclude方法；

通過對transclude進(jìn)行網(wǎng)絡(luò)翻譯結(jié)果是"嵌入"；其主要目的是將頁面中自定義的節(jié)點(diǎn)轉(zhuǎn)化為真實(shí)的html節(jié)點(diǎn)；如一個組件其實(shí)際dom為

那transclude具體干了什么呢，我們先看它的源碼：

export function transclude (el, options) {
  // extract container attributes to pass them down
  // to compiler, because they need to be compiled in
  // parent scope. we are mutating the options object here
  // assuming the same object will be used for compile
  // right after this.
  if (options) {
    // 把el(虛擬節(jié)點(diǎn)，如)元素上的所有attributes抽取出來存放在了選項(xiàng)對象的_containerAttrs屬性上
    // 使用el.attributes 方法獲取el上面，并使用toArray方法，將類數(shù)組轉(zhuǎn)換為真實(shí)數(shù)組
    options._containerAttrs = extractAttrs(el)
  }
  // for template tags, what we want is its content as
  // a documentFragment (for fragment instances)
  // 判斷是否為 template 標(biāo)簽
  if (isTemplate(el)) {
    // 得到一段存放在documentFragment里的真實(shí)dom
    el = parseTemplate(el)
  }
  if (options) {
    if (options._asComponent && !options.template) {
      options.template = ""
    }
    if (options.template) {
      // 將el的內(nèi)容（子元素和文本節(jié)點(diǎn)）抽取出來
      options._content = extractContent(el)
      // 使用options.template 將虛擬節(jié)點(diǎn)轉(zhuǎn)化為真實(shí)html，  => 
hello {{ msg }}
      // 但不包括未綁定數(shù)據(jù), 則上面轉(zhuǎn)化為 => 
hello
      el = transcludeTemplate(el, options)
    }
  }
  // isFragment: node is a DocumentFragment
  // 使用nodeType 為 11 進(jìn)行判斷是非為文檔片段
  if (isFragment(el)) {
    // anchors for fragment instance
    // passing in `persist: true` to avoid them being
    // discarded by IE during template cloning
    prepend(createAnchor("v-start", true), el)
    el.appendChild(createAnchor("v-end", true))
  }
  return el
}

首先先看如下代碼：

if (options) {
    // 把el(虛擬節(jié)點(diǎn)，如)元素上的所有attributes抽取出來存放在了選項(xiàng)對象的_containerAttrs屬性上
    // 使用el.attributes 方法獲取el上面，并使用toArray方法，將類數(shù)組轉(zhuǎn)換為真實(shí)數(shù)組
    options._containerAttrs = extractAttrs(el)
  }

而extractAttrs方法如下，其主要根據(jù)元素nodeType去判斷是否為元素節(jié)點(diǎn)，如果為元素節(jié)點(diǎn)，且元素有相關(guān)屬性，則將屬性值取出之后，再轉(zhuǎn)為屬性數(shù)組；最后將屬性數(shù)組放到options._containerAttrs中，為什么要這么做呢？因?yàn)楝F(xiàn)在的el可能不是真實(shí)的元素，而是諸如，在后面編譯過程，需要將其替換為真實(shí)的html節(jié)點(diǎn)，所以，它上面的屬性值都會先取出來預(yù)存起來，后面合并到真實(shí)html根節(jié)點(diǎn)的屬性上面；

function extractAttrs (el) {
  // 只查找元素節(jié)點(diǎn)及有屬性
  if (el.nodeType === 1 && el.hasAttributes()) {
    // attributes 屬性返回指定節(jié)點(diǎn)的屬性集合，即 NamedNodeMap, 類數(shù)組
    return toArray(el.attributes)
  }
}

下一句，根據(jù)元素nodeName是否為“template”去判斷是否為元素；如果是，則走parseTemplate(el)方法，并覆蓋當(dāng)前el對象

if (isTemplate(el)) {
    // 得到一段存放在documentFragment里的真實(shí)dom
    el = parseTemplate(el)
  }

function isTemplate (el) {
  return el.tagName &&
    el.tagName.toLowerCase() === "template"
}

而parseTemplate則主要是將傳入內(nèi)容生成一段存放在documentFragment里的真實(shí)dom；進(jìn)入函數(shù)，首先判斷傳入是否已經(jīng)是一個文檔片段，如果已經(jīng)是，則直接返回；否則，判斷傳入是否為字符串，如果為字符串, 先判斷是否是"#test"這種選擇器類型，如果是，通過document.getElementById方法取出元素，如果文檔中有此元素，將通過nodeToFragment方式，將其放入一個新的節(jié)點(diǎn)片段中并賦給frag，最后返回到外面；如果不是選擇器類型字符串，則使用stringToFragment將其生成一個新的節(jié)點(diǎn)片段，并返回；如果傳入非字符串而是節(jié)點(diǎn)(不管是什么節(jié)點(diǎn)，可以是元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、甚至Comment節(jié)點(diǎn)等)；則直接通過nodeToFragment生成節(jié)點(diǎn)片段并返回；

export function parseTemplate (template, shouldClone, raw) {
  var node, frag

  // if the template is already a document fragment,
  // do nothing
  // 是否為文檔片段, nodetype是否為11
  // https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment
 // 判斷傳入是否已經(jīng)是一個文檔片段，如果已經(jīng)是，則直接返回
  if (isFragment(template)) {
    trimNode(template)
    return shouldClone
      ? cloneNode(template)
      : template
  }
  // 判斷傳入是否為字符串
  if (typeof template === "string") {
    // id selector
    if (!raw && template.charAt(0) === "#") {
      // id selector can be cached too
      frag = idSelectorCache.get(template)
      if (!frag) {
        node = document.getElementById(template.slice(1))
        if (node) {
          frag = nodeToFragment(node)
          // save selector to cache
          idSelectorCache.put(template, frag)
        }
      }
    } else {
      // normal string template
      frag = stringToFragment(template, raw)
    }
  } else if (template.nodeType) {
    // a direct node
    frag = nodeToFragment(template)
  }

  return frag && shouldClone
    ? cloneNode(frag)
    : frag
}

從上面可見，在parseTemplate里面最重要的是nodeToFragment和stringToFragment；那么，它們又是如何將傳入內(nèi)容轉(zhuǎn)化為新的文檔片段呢？首先看nodeToFragment：

function nodeToFragment (node) {
  // if its a template tag and the browser supports it,
  // its content is already a document fragment. However, iOS Safari has
  // bug when using directly cloned template content with touch
  // events and can cause crashes when the nodes are removed from DOM, so we
  // have to treat template elements as string templates. (#2805)
  /* istanbul ignore if */
  // 是template元素或者documentFragment，使用stringToFragment轉(zhuǎn)化并保存節(jié)點(diǎn)內(nèi)容
  if (isRealTemplate(node)) {
    return stringToFragment(node.innerHTML)
  }
  // script template
  if (node.tagName === "SCRIPT") {
    return stringToFragment(node.textContent)
  }
  // normal node, clone it to avoid mutating the original
  var clonedNode = cloneNode(node)
  var frag = document.createDocumentFragment()
  var child
  /* eslint-disable no-cond-assign */
  while (child = clonedNode.firstChild) {
  /* eslint-enable no-cond-assign */
    frag.appendChild(child)
  }
  trimNode(frag)
  return frag
}

其實(shí)看源碼，很容易理解，首先判斷傳入內(nèi)容是否為template元素或者documentFragment或者script標(biāo)簽，如果是，都直接走stringToFragment；后面就是先使用document.createDocumentFragment創(chuàng)建一個文檔片段，然后將節(jié)點(diǎn)進(jìn)行循環(huán)appendChild到創(chuàng)建的文檔片段中，并返回新的片段；
那么，stringToFragment呢？這個就相對復(fù)雜一點(diǎn)了，如下：

function stringToFragment (templateString, raw) {
  // try a cache hit first
  var cacheKey = raw
    ? templateString
    : templateString.trim() //trim() 方法會從一個字符串的兩端刪除空白字符
  var hit = templateCache.get(cacheKey)
  if (hit) {
    return hit
  }
  // 創(chuàng)建一個文檔片段
  var frag = document.createDocumentFragment()
  // tagRE: /<([w:-]+)/
  // 匹配標(biāo)簽
  // "".match(/<([w:-]+)/) => [""]
  var tagMatch = templateString.match(tagRE)
  // entityRE: /&#?w+?;/
  var entityMatch = entityRE.test(templateString)
  // commentRE: /