Vue的渲染函数

在vue中，我们可以通过三种方法来创建虚拟DOM：el，template，render

el 的值是一个在Vue实例之外定义的模板，将模板的 id 当做值传递给 el，在编译时，Vue会使用 Vue.compile(...)自动将对应的模板转换为 render 函数，进而渲染出虚拟DOM；

template 的值是字符串—— html 形式的字符串，其编译过程与 el 相同；

render 的值是一个函数，该函数的返回值是一个通过 createElement(...) 创建的虚拟DOM；

三者中的两者或以上同时出现时，优先级为 render > el > template

由于使用 el 和 template 会多出模板转换这一过程，所以性能会有所损失，但是其带来的收益可以使我们忽略这一部分

createElement(...)函数是Vue提供的一个用于创建虚拟Node的方法，它接收三个参数：

1. Node标签： 一个HTML标签 或者 一个组件名
2. Attrs：HTML标签 或者 组件名 的属性，例如，HTML标签的 class 等
3. children：子节点数组，注意，子节点也需要使用 createElement(...) 创建

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)