這篇文章主要介紹了vue模板編譯的原理是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue模板編譯的原理是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)周寧免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

vue提供了模板語(yǔ)法，允許我們聲明式地描述狀態(tài)和DOM之間的綁定關(guān)系，比如<p>{{name}}<p>。

模板編譯指的是模板將編譯成render函數(shù)的過(guò)程，渲染函數(shù)的作用是每次執(zhí)行時(shí)，會(huì)根據(jù)最新狀態(tài)生成新的vnode。

編譯的過(guò)程是：模板作為輸入 -> 模板編譯 階段->生成 渲染函數(shù)

面試題

• vue的模板編譯？

• 模板編譯Compiler中render講解？

• vue 模板編譯的過(guò)程，每一個(gè)過(guò)程細(xì)說(shuō)一下做了些什么

• 模板編譯，誰(shuí)去解析AST樹 【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】

將模板編譯成渲染函數(shù)

• 解析器：將模板解析為AST(Abstract Syntax Tree 抽象語(yǔ)法樹)

• 優(yōu)化器：遍歷AST標(biāo)記靜態(tài)節(jié)點(diǎn),因?yàn)殪o態(tài)節(jié)點(diǎn)不可變，不需要為打上標(biāo)簽的靜態(tài)節(jié)點(diǎn)創(chuàng)建新的虛擬節(jié)點(diǎn)，直接克隆已有的虛擬節(jié)點(diǎn)。

• 代碼生成器：使用AST生成渲染函數(shù)。將AST轉(zhuǎn)換成代碼字符串。將代碼字符串放入渲染函數(shù)中，導(dǎo)出被外界使用。

案例

1.模板確認(rèn)

假設(shè)如下代碼,有el、template、render、$mount

//復(fù)雜案例
let vue = new Vue({
    el: '#app',
    data() {
        return {
            a: 1,
            b: [1]
        }
    },
    render(h) {
        return h('div', { id: 'hhh' }, 'hello')
    },
    template: `<div id='hhh' style="aa:1;bb:2"><a>{{xxx}}{{ccc}}</a></div>`
}).$mount('#app')

console.log(vue)

//腳手架創(chuàng)建的案例
let vue = new Vue({
  render: h => h(App)
}).$mount('#app')

1）渲染到哪個(gè)根節(jié)點(diǎn)上：判斷有無(wú)el屬性，有的話直接獲取el根節(jié)點(diǎn)，沒有的話調(diào)用$mount時(shí)去獲取根節(jié)點(diǎn)

2）渲染哪個(gè)模板到根節(jié)點(diǎn)上去：是否調(diào)用render 函數(shù)傳入了模板 render: h => h(App) -> <App></App>

• 有render：這時(shí)候優(yōu)先執(zhí)行render函數(shù)，render優(yōu)先級(jí) > template

• 無(wú)render：

• 有template：template解析成render函數(shù)的所需格式-代碼字符串，并使用調(diào)用render函數(shù)渲染

• 無(wú)template：el根節(jié)點(diǎn)的outerHTML解析成render函數(shù)的所需格式-代碼字符串，并使用調(diào)用render函數(shù)渲染
  3.渲染的方式：無(wú)論什么情況，最后都統(tǒng)一是要使用render函數(shù)渲染

2.解析器-將模板解析成AST

解析器-將模板解析成AST

<div>
  <p>{{name}}</p>
</div>

將上述模板解析成AST后,AST抽象語(yǔ)法樹就是使用JS中的對(duì)象來(lái)描述一個(gè)節(jié)點(diǎn)，一個(gè)對(duì)象表示一個(gè)節(jié)點(diǎn)。

{
  tag: "div"
  type: 1, //節(jié)點(diǎn)類型
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined, //存放父節(jié)點(diǎn)
  attrsList: [],
  attrsMap: {},
  children: [ //存放孩子節(jié)點(diǎn)
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{name}}",
          static: false,
          expression: "_s(name)"
      }]
    }
  ]
}

解析器的工作原理

解析器的原理的是一小段一小段地截取模板字符串，每截取一小段字符串，就會(huì)根據(jù)截取出來(lái)的字符串類型觸發(fā)不同的鉤子函數(shù)，直到模板字符串截空停止。然后使用棧來(lái)確定層級(jí)關(guān)系

解析器內(nèi)部分也分幾個(gè)子解析器，如HTML解析器、文本解析器等。

HTML解析器的作用是解析HTML，在解析HTML的過(guò)程中不斷觸發(fā)各種鉤子函數(shù)，

• 開始標(biāo)簽的鉤子函數(shù)中可以構(gòu)建元素類型的節(jié)點(diǎn)

• 文本鉤子函數(shù)中可以構(gòu)建文本類型的節(jié)點(diǎn)

• 注釋鉤子函數(shù)中可以構(gòu)建注釋類型的節(jié)點(diǎn)

• 結(jié)束標(biāo)簽鉤子函數(shù)

文本解析器是對(duì)HTML解析出來(lái)的文本進(jìn)行二次加工，比如插值語(yǔ)法{{}}

如何確定DOM之間的層級(jí)關(guān)系？使用棧
在觸發(fā)開始標(biāo)簽的鉤子函數(shù)時(shí)，如果當(dāng)前標(biāo)簽不是自閉合標(biāo)簽，就push進(jìn)stack。
在觸發(fā)結(jié)束標(biāo)簽的鉤子函數(shù)時(shí)，就從棧中pop出戰(zhàn)

3.優(yōu)化器-標(biāo)記AST中的靜態(tài)節(jié)點(diǎn)

標(biāo)記靜態(tài)子樹的好處

• 每次重新渲染時(shí)，不需要為靜態(tài)子樹創(chuàng)建新虛擬子樹，克隆已存在的靜態(tài)子樹

• 在虛擬DOM中打補(bǔ)丁(patching)的過(guò)程可以跳過(guò) ，靜態(tài)子樹是不可變的

優(yōu)化器的內(nèi)部實(shí)現(xiàn)主要分兩步用遞歸的方式將所有節(jié)點(diǎn)添加 static 屬性，true表示是靜態(tài)的，false表示不是靜態(tài)的。

• 在AST中找出所有靜態(tài)節(jié)點(diǎn)并打上標(biāo)記
  靜態(tài)節(jié)點(diǎn):DOM不會(huì)發(fā)生變化的節(jié)點(diǎn)
  通過(guò)遞歸的方式從上向下標(biāo)記靜態(tài)節(jié)點(diǎn)，如果一個(gè)節(jié)點(diǎn)被標(biāo)記為靜態(tài)節(jié)點(diǎn)，但它的子節(jié)點(diǎn)卻被標(biāo)記為動(dòng)態(tài)節(jié)點(diǎn)，就說(shuō)明該節(jié)點(diǎn)不是靜態(tài)節(jié)點(diǎn)，可以將它改為動(dòng)態(tài)節(jié)點(diǎn)。靜態(tài)節(jié)點(diǎn)的特征是它的子節(jié)點(diǎn)也必須是靜態(tài)的。

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

• **在AST中找出所有靜態(tài)根節(jié)點(diǎn)并打上標(biāo)記 **
  靜態(tài)根節(jié)點(diǎn):子節(jié)點(diǎn)全是靜態(tài)節(jié)點(diǎn)的節(jié)點(diǎn)
  使用遞歸從上向下尋找，在尋找的過(guò)程中遇見的第一個(gè)靜態(tài)節(jié)點(diǎn)就為靜態(tài)根節(jié)點(diǎn)，同時(shí)不繼續(xù)往下找。

如果一個(gè)靜態(tài)根節(jié)點(diǎn)的子節(jié)點(diǎn)只有一個(gè)文本節(jié)點(diǎn)或沒有子節(jié)點(diǎn)，那么不會(huì)標(biāo)記成靜態(tài)根節(jié)點(diǎn)，即使他們是，因?yàn)閮?yōu)化成本大于收益

怎么判斷是否靜態(tài)節(jié)點(diǎn)?
在將模板字符串解析成AST的時(shí)候，會(huì)根據(jù)不同的文本類型設(shè)置一個(gè) type

type	說(shuō)明	是否時(shí)靜態(tài)節(jié)點(diǎn)
1	元素節(jié)點(diǎn)	進(jìn)行一些排除
2	帶遍歷的動(dòng)態(tài)文本節(jié)點(diǎn)	不是
3	不帶遍歷的純文本節(jié)點(diǎn)	是

4.代碼生成器-將AST轉(zhuǎn)化成渲染函數(shù)中的代碼字符串

代碼生成器的作用:將AST轉(zhuǎn)化成渲染函數(shù)中的代碼字符串

<div>
  <p>{{name}}</p>
</div>
//生成的render渲染函數(shù)
{
  render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
//格式化后
with(this){
  return _c(
    'div',
    [
      _c(
        'p',
        [
          _v(_s(name))
        ]
      )
    ]
  )
}

生成代碼字符串是一個(gè)遞歸的過(guò)程，從頂向下依次處理每一個(gè)AST節(jié)點(diǎn)。
節(jié)點(diǎn)有三種類型，分別對(duì)應(yīng)三種不同的創(chuàng)建方法與別名。

類型	創(chuàng)建方法	別名
元素節(jié)點(diǎn)	createElement	_c
文本節(jié)點(diǎn)	createTextVNode	_v
注釋節(jié)點(diǎn)	createEmptyVNode	_e

渲染函數(shù)可以生成VNode的原因:渲染函數(shù)其實(shí)是執(zhí)行了createElement，而createElement可以創(chuàng)建VNode。

代碼字符串的拼接過(guò)程

遞歸AST來(lái)生成字符串，最先生成根節(jié)點(diǎn)，然后在子節(jié)點(diǎn)字符串生成后，將其拼接在根節(jié)點(diǎn)的參數(shù)中，子節(jié)點(diǎn)的子節(jié)點(diǎn)拼接在子節(jié)點(diǎn)的參數(shù)中，一層層拼接。

關(guān)于“vue模板編譯的原理是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue模板編譯的原理是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：vue模板編譯的原理是什么
標(biāo)題來(lái)源：http://jinyejixie.com/article36/ghhcpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站導(dǎo)航、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)