大多数情况使用vue模板语法创建应用，在某些场景下，需要用到JavaScript完全的编程能力，这时就用到渲染函数了。
基本用法
创建Vnodes
Vue提供了一个h()函数用于创建vnodes：
import {h} from 'vue'const vnode = h('div', // type{ id:'foo', class:'bar' }, //props[] // children
)h()是hyperscript的简称，代表“能生成HTML的JavaScript”.
// h()函数除了类型必填以外，其他的参数都是可选的，
h('div')
h('div',{id:'foo'})// attribute（用户手动赋值的属性，后天属性值）和property（html自带的属性，原生属性值）
// 都能在prop中书写,vue会将它们分配到正确的位置
h('div', {class:'bar',innerHTML:'hello' })//类与样式可以像在模板中一样 用数组或对象的形式书写
h('div',{class:[foo,{bar}],style:{color:'red'} })// 事件监听器应以onXxx的形式书写
h('div',{onClick:()=>{} })// children可以是一个字符串
h('div',{id:'foo'},'hello')// 没有props时可以省略不写
h('div','hello')
h('div', [h('span','hello')] )// children数组可以同时包含vnodes与字符串
h('div',['hello',h('span','hello')])
声明渲染函数
当组合式API与模板一起使用时，setup()钩子的返回值是用于暴露数据给模板。然而当我们使用渲染函数时，可以直接把渲染函数返回：
import {ref,h} from 'vue'export default{props:{},setup(props){const count = ref(1)return () => h('div',props.msg +count.value)}
}Vnodes 必须唯一
function render(){return h('div',p,p, // 重复的vnodes是无效的,可以使用一个工厂函数来渲染多个相同的段落Array.from({length:20}).map(()=>{return h('p','hi')}))}JSX/TSX
JSX是JavaScript的一个类似XML的扩展，可以用以下方式来写代码
cosnt vnode = <div>hello</div>// 在JSX表达式中，使用大括号来嵌入动态值
const vnode2 = <div id={dynamicId}> hello,{username} </div>注意Vue的JSX转换方式与React中JSX的转换方式不同
看一下v-if在模板、渲染函数和JSX中的不同写法：
<div><div v-if="ok">yes</div><span v-else>no</span>
</div>
等价于使用如下渲染函数/JSX语法：
h('div', [ok.value? h('div','yes') : h('span','no') ] )<div> {ok.value ? <div>yes</div> : <span>no</span> } </div>v-for
<ul><li v-for="{ id, text } in items" :key="id">{{ text }}</li>
</ul>等价于
h(
'ul',items.value.map((item)=>{return h('li', {key:item.id} , item.text)})
)
<ul>{ items.value.map(({id,text})=>{return <li key={id}>{text}<li> }) }</ul>v-on
h('button',{onClick: ()=>{} },'click me')<buttononClick={ ()=>{/*...*/}}>
click me
</button>
