记录-Vue.js模板编译过程揭秘：从模板字符串到渲染函数

Posted 2023-04-14 林恒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录-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]])))
    ])
  ])

在渲染函数中，我们可以看到Vue将HTML标记转换为_createVNode和_createBlock函数的调用，将指令和表达式转换为相应的JavaScript代码，并使用_toDisplayString函数将表达式的值转换为字符串。最终生成的渲染函数会被Vue用来渲染组件的实例。