template -> parse 模版基础编译 -> optimize 优化 AST -> generate 生成 JS 字符串 -> render 函数

<div name="test">
  <!-- 这是注释 -->
  <p>{{ test }}</p>
  一个文本节点
  <div>good job</div>
</div>

function render() {
  with (this) {
    return _c(
      'div',
      {
        attrs: {
          name: 'test',
        },
      },
      [_c('p', [_v(_s(test))]), _v('\n     一个文本节点\n    '), _c('div', [_v('good job')])]
    );
  }
}

import {
  createCommentVNode as _createCommentVNode,
  toDisplayString as _toDisplayString,
  createVNode as _createVNode,
  createTextVNode as _createTextVNode,
  openBlock as _openBlock,
  createBlock as _createBlock,
} from 'vue';

const _hoisted_1 = {
  name: 'test',
};
const _hoisted_2 = /*#__PURE__*/ _createTextVNode(' 一个文本节点 ');
const _hoisted_3 = /*#__PURE__*/ _createVNode('div', null, 'good job', -1 /* HOISTED */);

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createBlock('div', _hoisted_1, [
      _createCommentVNode(' 这是注释 '),
      _createVNode('p', null, _toDisplayString(_ctx.test), 1 /* TEXT */),
      _hoisted_2,
      _hoisted_3,
    ])
  );
}