Vue中render函数详解

render介绍

        众所周知，仅限于我大前端，Vue中的核心就是虚拟DOM。

        通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通过Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器。

        render函数的作用就是返回一个虚拟dom，将该虚拟dom渲染成真实的dom。

new Vue({
  el: '#app',
  router,
  store,
  render: (h) => h(App) // createElement 创建虚拟DOM
})

render 函数有两个参数

export default {
  name: 'Test',
  // render作用:会return一个虚拟dom，return什么该组件就渲染什么
  render: (h, context) => { // 第二个参数context存储了一些其他组件传过来的数据
    console.log('context', context)
    // h(标签名/组件,{虚拟dom配置},子集:子虚拟dom,也是虚拟dom节点信息,支持字符串与数组)
    return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
  }
}

第一个参数 h 是 createElement 的缩写，其中有三个形参

• 第一个参数可以是一个 HTML 标签字符串，组件选项对象或者是解析标签或者组件的一个 async 异步函数。必须参数。
• 第二个参数 { 虚拟dom配置 } ，一个包含虚拟DOM相关属性的数据对象。可选参数。
• 第三个参数 是子虚拟节点，支持字符串与数组。可选参数。 

第二个参数 context 可以拿到外部组件传进来的数据，如 prop、slots等

 其他选项

functional

• 类型：boolean

• 详细：

  使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。

• <script>
  export default {
    name: 'Test',
    /* 函数式组件。它内部的东西不是响应式了(就是需要什么东西就直接渲染什么东西，
    不需要进行其他操作了)。没有生命周期等其他东西了，节省性能，起到性能优化作用*/
    functional: true,
    // render作用:会return一个虚拟dom，return什么该组件就渲染什么
    render: (h, context) => { // 第二个参数存储了一些其他组件传过来的数据
      console.log('context', context)
      // h(标签名/组件,{虚拟dom配置},子集:也是虚拟dom节点信息支持字符串与数组)
      return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
    }
  }
  </script>