思考：

html是標(biāo)簽語言，只有JS才能實(shí)現(xiàn)判斷、循環(huán)，而模版有指令、插值、JS表達(dá)式，能夠?qū)崿F(xiàn)判斷、循環(huán)等，故模板不是html，因此模板一定是轉(zhuǎn)換為某種JS代碼，這種編譯又是如何進(jìn)行的？

解析：

模版編譯是將template編譯成render函數(shù)的過程，這個(gè)過程大致可以分成三個(gè)階段：

1、parse 解析器

解析器主要就是將 模板字符串 轉(zhuǎn)換成  element ASTs

模板字符串：

<div>
   <p>{{message}}</p>
</div>

element ASTs

AST是指抽象語法樹 和 Vnode 類似，都是使用JavaScript對(duì)象來描述節(jié)點(diǎn)的樹狀表現(xiàn)形式

{
  tag: "div"
  // 節(jié)點(diǎn)的類型（1標(biāo)簽，2包含字面量表達(dá)式的文本節(jié)點(diǎn)，3普通文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)）
  type: 1,
  // 靜態(tài)根節(jié)點(diǎn)
  staticRoot: false,
  // 靜態(tài)節(jié)點(diǎn)
  static: false,
  plain: true,
  // 父節(jié)點(diǎn)元素描述對(duì)象的引用
  parent: undefined,
  // 只有當(dāng)節(jié)點(diǎn)類型為1，才會(huì)有attrsList屬性，它是一個(gè)對(duì)象數(shù)組，存儲(chǔ)著原始的html屬性名和值
  attrsList: [],
  // 同上，區(qū)別是attrsMap是以鍵值對(duì)的方式保存html屬性名和值的
  attrsMap: {},
  // 存儲(chǔ)著該節(jié)點(diǎn)所有子節(jié)點(diǎn)的元素描述對(duì)象
  children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{message}}",
          static: false,
          // 當(dāng)節(jié)點(diǎn)類型為2時(shí)，對(duì)象會(huì)包含的表達(dá)式
          expression: "_s(message)"
      }]
    }
  ]
}

1.1 截取的規(guī)則

主要是通過判斷模板中html.indexof('<')的值，來確定要截取標(biāo)簽還是文本.

截取的過程：

字符串部分

`<div><p>{{message}}<p></div>`

1.2  截取過程部分

第一次截取

• 判斷模板中html.indexof('<')的值, 為零 (注釋、條件注釋、doctype、開始標(biāo)簽、結(jié)束標(biāo)簽中的一種)
• 被起始標(biāo)簽的正則匹配成功，獲取當(dāng)前的標(biāo)簽名為div，然后截掉匹配成功的'<div'部分，得到新的字符串 ><p>{{message}}</p></div>
• 截取掉開始標(biāo)簽后，會(huì)使用匹配屬性的正則去匹配，如果匹配成功，則得到該標(biāo)簽的屬性列表，如果匹配不成功，則該標(biāo)簽的屬性列表為空數(shù)組
• 截掉屬性后，會(huì)使用匹配開始標(biāo)簽結(jié)束的正則去匹配，得到它是否是自閉合標(biāo)簽的信息，然后截掉匹配到的字符串得到新的字符串 <p>{{message}}</p></div>

• 匹配到開始標(biāo)簽，判斷當(dāng)前節(jié)點(diǎn)是否存在根節(jié)點(diǎn)，不存在則會(huì)創(chuàng)建一個(gè)元素類型的樹節(jié)點(diǎn)，存在，則將其設(shè)置為currentParent的子節(jié)點(diǎn)，然后將當(dāng)前節(jié)點(diǎn)壓入stack棧中

/**
   總結(jié)為，匹配標(biāo)簽，提取屬性，建立層級(jí)
*/
// 經(jīng)過上面的匹配，剩下的字符串部分為：
`<p>{{message}}<p></div>`

第二次截取

/**
    同上
*/
// 經(jīng)過上面的匹配，剩下的字符串部分為：
`{{message}}</p></div>`

第三次截取

• 判斷模板中html.indexof('<')的值, 大于等于零 (文本、表達(dá)式中的一種)
• 查詢最近的一個(gè)'<'，并匹配其是否符合(起始標(biāo)簽、結(jié)束標(biāo)簽、注釋、條件注釋中的一種)，匹配成功則結(jié)束遍歷，不成功繼續(xù)遍歷

例如：

a < b </p> => 文本部分 a < b ，命中結(jié)束標(biāo)簽

a<b</p> => 文本部分 a
，命中開始標(biāo)簽<b

/**
   總結(jié)為，判斷類型，截取文本
*/
// 經(jīng)過上面的匹配，剩下的字符串部分為：
`</p></div>`

第四次截取

• 判斷模板中html.indexof('<')的值, 為零 (注釋、條件注釋、doctype、開始標(biāo)簽、結(jié)束標(biāo)簽中的一種)
• 被結(jié)束標(biāo)簽的正則匹配成功，然后截掉匹配成功的 </p> 部分，得到新的字符串 </div>
• 匹配到結(jié)束標(biāo)簽，會(huì)從棧中彈出一個(gè)節(jié)點(diǎn)'p'，并將棧中的最后一個(gè)節(jié)點(diǎn)'div'設(shè)置為currentParent

/**
    總結(jié)為，匹配標(biāo)簽，確定層級(jí)
*/
// 經(jīng)過上面的匹配，剩下的字符串部分為：
`</div>`
第五次截取

/**
    同上
*/
結(jié)束

1.3  解析器總結(jié)

• 模板字符串 轉(zhuǎn)換成  element ASTs 過程，其實(shí)就是不斷的截取字符串并解析它們的過程。
• 匹配到起始標(biāo)簽，則截取對(duì)應(yīng)的開始標(biāo)簽，并定義AST的基本結(jié)構(gòu)，并且解析標(biāo)簽上帶的屬性(attrs， tagName)、指令等等，同時(shí)將此標(biāo)簽推進(jìn)棧中
• 匹配到結(jié)束標(biāo)簽，則需要通過這個(gè)結(jié)束標(biāo)簽的tagName從后到前匹配stack中每一項(xiàng)的tagName，將匹配到的那一項(xiàng)之后的所有項(xiàng)全部刪除（從棧里面彈出來）所以棧中的最后一項(xiàng)就是父元素
• 解析階段，節(jié)點(diǎn)會(huì)被拉平，沒有層級(jí)關(guān)系，通過觀察可以發(fā)現(xiàn)節(jié)點(diǎn)樹，可以發(fā)現(xiàn)是最里面的節(jié)點(diǎn)被解析完成，最后一個(gè)解析往往是父元素，故我們通過一個(gè)棧(stack)來記錄節(jié)點(diǎn)的層級(jí)關(guān)系。
• 自閉合標(biāo)簽 <input /> 不存在子節(jié)點(diǎn), 故不需求push到棧(stack)。

2、optimize 優(yōu)化器

優(yōu)化器的作用主要是對(duì)生成的AST進(jìn)行靜態(tài)內(nèi)容的優(yōu)化，標(biāo)記靜態(tài)節(jié)點(diǎn)，為了每次重新渲染，不需要為靜態(tài)子樹創(chuàng)建新節(jié)點(diǎn)，可以跳過虛擬DOM中patch過程（即不需要參與第二次的頁面渲染了，大大提升了渲染效率）。

2.1 靜態(tài)節(jié)點(diǎn)

遍歷AST語法樹，找出所有的靜態(tài)節(jié)點(diǎn)并打上標(biāo)記

function isStatic (node) {
    // expression
    if (node.type === 2) {
      return false
    }
    // text
    if (node.type === 3) {
      return true
    }
    /**
 

1. 不能使用動(dòng)態(tài)綁定語法，即標(biāo)簽上不能有v-、@、:開頭的屬性；
2. 不能使用v-if、v-else、v-for指令；
3. 不能是內(nèi)置組件，即標(biāo)簽名不能是slot和component；
4. 標(biāo)簽名必須是平臺(tái)保留標(biāo)簽，即不能是組件；
5. 當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)不能是帶有 v-for 的 template 標(biāo)簽；
6. 節(jié)點(diǎn)的所有屬性的 key 都必須是靜態(tài)節(jié)點(diǎn)才有的 key，注：靜態(tài)節(jié)點(diǎn)的key是有限的，

它只能是type,tag,attrsList,attrsMap,plain,parent,children,attrs之一；

    */
    return !!(node.pre || (
      !node.hasBindings &&
      !node.if && !node.for &&
      !isBuiltInTag(node.tag) &&
      isPlatformReservedTag(node.tag) &&
      !isDirectChildOfTemplateFor(node) &&
      Object.keys(node).every(isStaticKey)
    ))
}

2.2 靜態(tài)根節(jié)點(diǎn)

遍歷經(jīng)過上面步驟后的樹，找出靜態(tài)根節(jié)點(diǎn)，并打上標(biāo)記

2.3 優(yōu)化器總結(jié)

• 沒有使用vue獨(dú)有的語法(v-pre v-once除外)的節(jié)點(diǎn)就可以稱為靜態(tài)節(jié)點(diǎn)
• 靜態(tài)節(jié)點(diǎn)：指當(dāng)前節(jié)點(diǎn)及其所有子節(jié)點(diǎn)都是靜態(tài)節(jié)點(diǎn)
• 靜態(tài)根節(jié)點(diǎn)：指本身及所有子節(jié)點(diǎn)都是靜態(tài)節(jié)點(diǎn)，但是父節(jié)點(diǎn)為動(dòng)態(tài)節(jié)點(diǎn)的節(jié)點(diǎn)

3、generate 代碼生成器

代碼生成器的作用是通過AST語法樹生成代碼字符串，代碼字符串被包裝進(jìn)渲染函數(shù)，執(zhí)行渲染函數(shù)后，可以得到一份vnode

3.1 JS的with語法

使用 with，能改變｛｝內(nèi)自由變量的查找方式，將｛｝內(nèi)自由變量，當(dāng)做 obj 的屬性來查找，如果找不到匹配的obj屬性，就會(huì)報(bào)錯(cuò)

const obj = {a: 100, b: 200}
with(obj) {
     console.log(a)
     console.log(b)
     // console.log(c) // 會(huì)報(bào)錯(cuò)
}

代碼字符串

解析parse生成的element ASTs，拼接成字符串

with(this){return _c('div',_c('p',[_v(message)])])}

得到render函數(shù)：

/** 代碼字符串通過new Function('代碼字符串')就可以得到當(dāng)前組件的render函數(shù) */

const stringCode = `with(this){return _c('div',_c('p',[_v(message)])])}`

const render = new Function(stringCode)

欲觀看不同指令、插值、JS表達(dá)式，可使用vue-template轉(zhuǎn)換

const compiler = require('vue-template-compiler')
// 插值
const template = `<p>{{message}}</p>`
const result = compiler.compile(template)
console.log(result.render)
// with(this){return _c('p',[_v(_s(message))])}

vue 源代碼找到縮寫函數(shù)的含義

模板編譯的源碼可以在 `vue-template-compiler` [2] 包中查看

function installRenderHelpers(target) {
    target._c = createElement
    // 標(biāo)記v-once
    target._o = markOnce
    // 轉(zhuǎn)換成Number類型
    target._n = toNumber
    // 轉(zhuǎn)換成字符串
    target._s = toString
    // 渲染v-for
    target._l = renderList
    // 渲染普通插槽和作用域插槽
    target._t = renderSlot
    // 通過staticRenderFns渲染靜態(tài)節(jié)點(diǎn)
    target._m = renderStatic
    // 獲取過濾器
    target._f = resolveFilter
    // 檢查鍵盤事件keycode
    target._k = checkKeyCodes
    target._b = bindObjectProps
    // 創(chuàng)建文本vnode
    target._v = createTextVNode
    // 創(chuàng)建空vnode
    target._e = createEmptyVNode
    target._u = resolveScopedSlots
    target._g = bindObjectListeners
    // 處理修飾符
    target._p = prependModifier
}

綜述：

vue腳手架中會(huì)使用vue-loader在開發(fā)環(huán)境做模板編譯（預(yù)編譯）

解析過程是一小段一小段的去截取字符串，然后維護(hù)一個(gè) stack 用來保存DOM深度，當(dāng)所有字符串都截取完之后也就解析出了一個(gè)完整的 AST

優(yōu)化過程是用遞歸的方式將所有節(jié)點(diǎn)打標(biāo)記，表示是否是一個(gè) 靜態(tài)節(jié)點(diǎn) ，然后再次遞歸一遍把 靜態(tài)根節(jié)點(diǎn) 也標(biāo)記出來

代碼生成階段是通過遞歸生成函數(shù)執(zhí)行代碼的字符串，遞歸的過程根據(jù)不同的 節(jié)點(diǎn)類型 調(diào)用不同的 生成方法

到此這篇關(guān)于vue模版編譯詳情的文章就介紹到這了,更多相關(guān)vue模版編譯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論