渲染函数&JSX

大多数情况使用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')

<button
 onClick={ ()=>{
    /*...*/
    }}>
click me
</button>