初识vue渲染函数-rander

render官方介绍

• 类型：(createElement: () => VNode) => VNode

• 详细：

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

  如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
  Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

通过简单的描述可以看到渲染函数的特殊性，首先来了解一下vue渲染

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

如果是比较简单的逻辑，使用template和el比较好，而使用自定义render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。

可以看到我们直接跳过了 el 和 template ，可以直接拿到 render函数 ，相当于我们一直使用的是 封装好的组件，而现在我们可以直接改写源码

语法

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (   createElement参数   )
    },
    props: {}，
    methods： {}
})

参数

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',
 
  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // (样式，绑定事件，等等行内选项)
  },
 
  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

现在就可以理解vue官方给的例子了

Vue.component('title-head', {
  render: function (createElement) {
      return createElement(
          'h' + this.level,   // tag name 标签名称
          this.$slots.default // 插槽
      )
  },
  props: {
      level: {
          type: Number,  // 参数
          required: true
      }
  }
})

在页面中使用

  <div class="box">
    <title-head :level="1">123123123123123123title-head>
  div>

 绑定简单的点击事件

Vue.component('title-head', {
  render: function(createElement) {
    return createElement(
      'h' + this.level, // tagname标签名称
      {
        on: {
          click: this.log
        }
      },
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  methods: {
    log() {
      console.log(this.level)
    }
  },
})