欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue模版編譯詳情

 更新時(shí)間:2021年09月27日 16:51:32   作者:大轉(zhuǎn)轉(zhuǎn)FE  
本文的初衷是想讓更多哎學(xué)習(xí)的人知道并了解vue模版編譯,所以文中主要以階段流程為主,不會(huì)涉及過(guò)多的底層代碼邏輯,需要的朋友可以參考一下

思考:

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

解析:

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

1、parse 解析器

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

模板字符串:

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

element ASTs

AST是指抽象語(yǔ)法樹 和 Vnode 類似,都是使用JavaScript對(duì)象來(lái)描述節(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ī)則

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

截取的過(guò)程:

字符串部分

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

1.2  截取過(guò)程部分

第一次截取

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

第二次截取

/**
    同上
*/
// 經(jīng)過(guò)上面的匹配,剩下的字符串部分為:
`{{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
,命中開(kāi)始標(biāo)簽<b

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


第四次截取

  • 判斷模板中html.indexof('<')的值, 為零 (注釋、條件注釋、doctype、開(kāi)始標(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)過(guò)上面的匹配,剩下的字符串部分為:
`</div>`
第五次截取

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

1.3  解析器總結(jié)

  • 模板字符串 轉(zhuǎn)換成  element ASTs 過(guò)程,其實(shí)就是不斷的截取字符串并解析它們的過(guò)程。
  • 匹配到起始標(biāo)簽,則截取對(duì)應(yīng)的開(kāi)始標(biāo)簽,并定義AST的基本結(jié)構(gòu),并且解析標(biāo)簽上帶的屬性(attrstagName)、指令等等,同時(shí)將此標(biāo)簽推進(jìn)棧中
  • 匹配到結(jié)束標(biāo)簽,則需要通過(guò)這個(gè)結(jié)束標(biāo)簽的tagName從后到前匹配stack中每一項(xiàng)的tagName,將匹配到的那一項(xiàng)之后的所有項(xiàng)全部刪除(從棧里面彈出來(lái))所以棧中的最后一項(xiàng)就是父元素
  • 解析階段,節(jié)點(diǎn)會(huì)被拉平,沒(méi)有層級(jí)關(guān)系,通過(guò)觀察可以發(fā)現(xiàn)節(jié)點(diǎn)樹,可以發(fā)現(xiàn)是最里面的節(jié)點(diǎn)被解析完成,最后一個(gè)解析往往是父元素,故我們通過(guò)一個(gè)棧(stack)來(lái)記錄節(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),可以跳過(guò)虛擬DOM中patch過(guò)程(即不需要參與第二次的頁(yè)面渲染了,大大提升了渲染效率)。

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

遍歷AST語(yǔ)法樹,找出所有的靜態(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)綁定語(yǔ)法,即標(biāo)簽上不能有v-、@、:開(kāi)頭的屬性;
2. 不能使用v-if、v-else、v-for指令;
3. 不能是內(nèi)置組件,即標(biāo)簽名不能是slotcomponent;
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)過(guò)上面步驟后的樹,找出靜態(tài)根節(jié)點(diǎn),并打上標(biāo)記

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

  • 沒(méi)有使用vue獨(dú)有的語(yǔ)法(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 代碼生成器

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

3.1 JS的with語(yǔ)法

使用 with,能改變{}內(nèi)自由變量的查找方式,將{}內(nèi)自由變量,當(dāng)做 obj 的屬性來(lái)查找,如果找不到匹配的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ù):

/** 代碼字符串通過(guò)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
    // 通過(guò)staticRenderFns渲染靜態(tài)節(jié)點(diǎn)
    target._m = renderStatic
    // 獲取過(guò)濾器
    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在開(kāi)發(fā)環(huán)境做模板編譯(預(yù)編譯)

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

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

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

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

相關(guān)文章

  • vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼

    vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼

    這篇文章主要介紹了用vue簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-06-06
  • 利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法

    利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法

    這篇文章主要給大家介紹了關(guān)于利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue-i18n具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決

    vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決

    這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue.js路由mode配置之去掉url上默認(rèn)的#方法

    vue.js路由mode配置之去掉url上默認(rèn)的#方法

    今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Vue3使用setup如何定義組件的name屬性詳解

    Vue3使用setup如何定義組件的name屬性詳解

    vue3中新增了setup,它的出現(xiàn)是為了解決組件內(nèi)容龐大后,理解和維護(hù)組件變得困難的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue3使用setup如何定義組件的name屬性的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決

    vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決

    這篇文章主要介紹了vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue實(shí)現(xiàn)圖書管理系統(tǒng)

    vue實(shí)現(xiàn)圖書管理系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖書管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 詳解Vue中的filter與directive

    詳解Vue中的filter與directive

    這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-05-05
  • vue自定義數(shù)字輸入框組件

    vue自定義數(shù)字輸入框組件

    這篇文章主要為大家詳細(xì)介紹了vue自定義數(shù)字輸入框組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 淺談vue權(quán)限管理實(shí)現(xiàn)及流程

    淺談vue權(quán)限管理實(shí)現(xiàn)及流程

    這篇文章主要介紹了淺談vue權(quán)限管理實(shí)現(xiàn)及流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04

最新評(píng)論