深入理解Vue组件之render函数

    一般来说，我们写 Vue.js 组件，模板都是写在 <template> 内的，但它并不是最终呈现的内容，template 只是一种对开发者友好的语法，能够一眼看到 DOM 节点，容易维护，在 Vue.js 编译阶段，会解析为 Virtual DOM。

    与 DOM 操作相比，Virtual DOM 是基于 JavaScript 计算的，所以开销会小很多。

    正常的 DOM 节点在 HTML 中是这样的：

<div id="main">
  <p>文本内容</p>
  <p>文本内容</p>
</div>

     用 Virtual DOM 创建的 JavaScript 对象一般会是这样的：

const vNode = {
  tag: 'div',
  attributes: {
    id: 'main'
  },
  children: [
    // p 节点
  ]
}

     vNode 对象通过一些特定的选项描述了真实的 DOM 结构。

     在 Vue.js 中，对于大部分场景，使用 template 足以应付，但如果想完全发挥 JavaScript 的编程能力，或在一些特定场景下，需要使用 Vue.js 的 Render 函数。

Render 函数

     正如上文介绍的 Virtual DOM 示例一样，Vue.js 的 Render 函数也是类似的语法，需要使用一些特定的选项，将 template 的内容改写成一个 JavaScript 对象。

     对于初级前端工程师，或想快速建站的需求，直接使用 Ren