众所周知，仅限于我大前端，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>