vue模版編譯詳情
思考:
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)簽上帶的屬性(
attrs
,tagName
)、指令等等,同時(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)簽名不能是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)過(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)文章希望大家以后多多支持腳本之家!
- Vue父子模版?zhèn)髦导敖M件傳值的三種方法
- 詳解vue父子模版嵌套案例
- 詳解用vue2.x版本+adminLTE開(kāi)源框架搭建后臺(tái)應(yīng)用模版
- vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
- VSCode寫vue項(xiàng)目一鍵生成.vue模版,修改定義其他模板的方法
- 詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版
- 詳解vue 模版組件的三種用法
- vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼
- Vue 中可以定義組件模版的幾種方式
- 解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號(hào))沖突問(wèn)題
- Vue2?模版指令元素綁定事件執(zhí)行順序解析
- vue的指令和插值問(wèn)題匯總
- vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
相關(guā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ǔ)言切換效果的方法
這篇文章主要給大家介紹了關(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-06vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue.js路由mode配置之去掉url上默認(rèn)的#方法
今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05淺談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