渲染函数

文档传送门：Render Functions & JSX

以文档中的举例为例，回顾一下组件的两种写法：
全局注册组件：

Vue.component('child', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

var vm = new Vue({
    el: "#app",
})

局部注册组件：

var child = {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

var vm = new Vue({
    el: "#app",
  components: {
      child
  },
})

注：一个小细节，components都写在new Vue({})的上方，写在下方无效。

上面示例中

return createElement('h1', this.blogTitle)

Vue通过建立虚拟DOM对真实的DOM发生的变化保持追踪。

createElement 参数

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为 String/Object 的函数，必要参数
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见深入data对象)
  },
  // {String | Array}
  // 子节点嵌套 (VNodes)，仍可以由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

深入data对象