記錄-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 class="wrapper">
    <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

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