快捷導(dǎo)航

vue模版編譯詳情

更新時間：2021年09月27日 16:51:32 作者：大轉(zhuǎn)轉(zhuǎn)FE

本文的初衷是想讓更多哎學(xué)習(xí)的人知道并了解vue模版編譯，所以文中主要以階段流程為主，不會涉及過多的底層代碼邏輯,需要的朋友可以參考一下

1、parse 解析器

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

模板字符串：

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

element ASTs

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

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

1.1 截取的規(guī)則

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

截取的過程：

字符串部分

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

1.2 截取過程部分

第一次截取

判斷模板中html.indexof('<')的值, 為零 (注釋、條件注釋、doctype、開始標簽、結(jié)束標簽中的一種)
被起始標簽的正則匹配成功，獲取當前的標簽名為div，然后截掉匹配成功的'<div'部分，得到新的字符串 ><p>{{message}}</p></div>
截取掉開始標簽后，會使用匹配屬性的正則去匹配，如果匹配成功，則得到該標簽的屬性列表，如果匹配不成功，則該標簽的屬性列表為空數(shù)組
截掉屬性后，會使用匹配開始標簽結(jié)束的正則去匹配，得到它是否是自閉合標簽的信息，然后截掉匹配到的字符串得到新的字符串<p>{{message}}</p></div>
匹配到開始標簽，判斷當前節(jié)點是否存在根節(jié)點，不存在則會創(chuàng)建一個元素類型的樹節(jié)點，存在，則將其設(shè)置為currentParent的子節(jié)點，然后將當前節(jié)點壓入stack棧中

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

第二次截取

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

第三次截取

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

例如：

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

a<b</p> => 文本部分 a
，命中開始標簽<b

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

第四次截取

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

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

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

1.3 解析器總結(jié)

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

2、optimize 優(yōu)化器

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

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

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

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

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

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

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

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

3、generate 代碼生成器

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

3.1 JS的with語法

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

const obj = {a: 100, b: 200}
with(obj) {
     console.log(a)
     console.log(b)
     // console.log(c) // 會報錯
}

代碼字符串

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

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

得到render函數(shù)：

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

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

const render = new Function(stringCode)

欲觀看不同指令、插值、JS表達式，可使用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
    // 標記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é)點
    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腳手架中會使用vue-loader在開發(fā)環(huán)境做模板編譯（預(yù)編譯）

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

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

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

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

您可能感興趣的文章: