render 函数的主要作用：-
创建虚拟 DOM：
render函数负责创建虚拟 DOM 元素，这些元素以 JavaScript 对象的形式表示页面的结构和内容。 -
根据状态和数据生成 UI：
render函数根据组件的状态（data数据）、属性（props）、计算属性（computed）、方法（methods）等信息，生成虚拟 DOM，包括元素、组件、事件处理等。 -
渲染动态内容：
render函数允许你动态生成内容，因此你可以在组件内部根据条件、循环、计算等逻辑来生成不同的虚拟 DOM。 -
响应式更新：当组件的状态或数据发生变化时，Vue.js 会自动重新运行
render函数以生成新的虚拟 DOM，然后比较新旧虚拟 DOM，找出变化的部分，最后更新实际的 DOM。
Vue2和3之间的区别是： Vue2用的是 createElement 函数去创建虚拟DOM元素，vue3呢是用h（或者使用createVNode）函数去创建虚拟DOM元素，更加简洁，还有就是Vue3引入Composition API，允许使用setup函数去编写组件逻辑，包括render函数，使得逻辑更加灵活可组合
vue3render例子：
App.vue:
<template>
<div id="app">
<h1>什么是Vue中的Render函数？</h1>
<Heading tag="ul" />
</div>
</template>
<script>
import Heading from './Heading'
export default {
components: {
Heading
}
}
</script>
<style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>
Heading.vue:
<script>
import { h } from 'vue'
export default {
props: {
tag: String
},
data () {
return {
people: ['红', '黄', '蓝']
}
},
render () {
return h(this.tag, {}, this.people.map(name => h('li', {}, `${name}`)))
// 传入的元素createElement('标签/组件名', {选项}, '可以是子元素，也可以是文本节点')
}
}
</script>
<style>
</style>
实现效果：
vue2的话将代码中的h更换成createElement就可以了。