記錄-Vue.js模板編譯程序揭秘：從模板字串到渲染函式

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Vue.js是一個基于組件化和回應式資料流的前端框架，當我們在Vue中撰寫模板代碼時，它會被Vue編譯器處理并轉換為可被瀏覽器決議的JavaScript代碼，Vue中的模板實際上是HTML標記和Vue指令的組合，它們會被Vue編譯器處理并轉化為一個JavaScript渲染函式，

Vue中的模板編譯分為兩個階段：

1.決議階段

在這個階段，Vue將模板字串決議為AST（抽象語法樹）的結構，決議器會掃描模板字串，識別出其中的HTML標簽、屬性、運算式等內容，然后構建成一個抽象語法樹，這個程序中也會對運算式進行決議和優化，以生成更高效的渲染函式，

例如，下面是一個簡單的Vue模板：

<div>
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

在決議階段，Vue將這個模板決議為AST的結構：

{
  type: 'element',
  tag: 'div',
  attrsList: [],
  children: [
    {
      type: 'element',
      tag: 'h1',
      attrsList: [],
      children: [{ type: 'expression', expression: 'title' }]
    },
    {
      type: 'element',
      tag: 'ul',
      attrsList: [],
      children: [
        {
          type: 'element',
          tag: 'li',
          attrsList: [{ name: 'v-for', value: 'item in items' }],
          children: [{ type: 'expression', expression: 'item' }]
        }
      ]
    }
  ]
}

2.代碼生成階段

在這個階段，Vue將AST轉換為渲染函式，渲染函式是一個JavaScript函式，它接收一個背景關系物件作為引數，并回傳一個VNode（虛擬節點）物件，表示要渲染的DOM樹結構，在渲染函式中，Vue會將模板中的HTML標簽轉換為createElement函式呼叫，將指令和運算式轉換為相應的JavaScript代碼，

例如，對于上面的模板，生成的渲染函式大致如下：

function render(_ctx, _cache) {
  return _openBlock(), _createBlock("div", null, [
    _createVNode("h1", null, _toDisplayString(_ctx.title), 1 /* TEXT */),
    _createVNode("ul", null, [
      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
        key: item
      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
    ])
  ])
}

在上面的渲染函式中，我們可以看到通過呼叫Vue提供的_createVNode函式和_createBlock函式來創建虛擬節點，并使用_toDisplayString函式來將運算式的值轉換為字串，同時，在回圈中使用了_cache物件來快取已渲染的VNode，以提高渲染性能，

總的來說，Vue的模板編譯程序將模板字串轉換為一個JavaScript函式，該函式接收一個背景關系物件作為引數，并回傳一個VNode物件，表示要渲染的DOM樹結構，這個程序中，Vue將模板中的HTML標記和指令轉換為JavaScript函式呼叫，同時對運算式進行決議和優化，以生成更高效的渲染函式，

舉一個更具體的例子，考慮下面這個Vue模板：

<template>
  <div >
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

在編譯程序中，Vue將模板字串決議為AST的結構，如下所示：

{
  type: 'element',
  tag: 'div',
  attrsList: [{ name: 'class', value: 'wrapper' }],
  children: [
    {
      type: 'element',
      tag: 'h1',
      attrsList: [],
      children: [{ type: 'expression', expression: 'message' }]
    },
    {
      type: 'element',
      tag: 'ul',
      attrsList: [],
      children: [
        {
          type: 'element',
          tag: 'li',
          attrsList: [{ name: 'v-for', value: 'item in items' }],
          children: [{ type: 'expression', expression: 'item' }]
        }
      ]
    }
  ]
}

然后，Vue將AST轉換為一個渲染函式，如下所示：

function render(_ctx, _cache) {
  return _openBlock(), _createBlock("div", { class: "wrapper" }, [
    _createVNode("h1", null, _toDisplayString(_ctx.message), 1 /* TEXT */),
    _createVNode("ul", null, [
      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
        key: item
      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
    ])
  ])
}

本文轉載于:

https://juejin.cn/post/7221354195914326073

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：WebAssembly初嘗試

下一篇：VUE框架中實作HTML頁面（區域）內容轉PDF下載