Vu3中使用h函数

- h函数优缺点
- h函数介绍
- 使用

h函数优缺点

h函数介绍

格式
h函数接受三个参数依次是创建的节点,节点属性,节点内容
优点:
跳过了模板编译,性能高
缺点:
学习成本略高

使用

<template><div><div>h函数</div><table border="1px" cellspacing="0px"><tr><td>序号</td><td>姓名</td><td>年龄</td><td>操作</td></tr><tr v-for="item in list"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><btn type="edit">编辑</btn><btn type="delete">删除</btn></td></tr></table></div>
</template><script setup lang=ts>
import {reactive,h} from 'vue'let list = reactive([{id:1,name:"zs",age:18},{id:2,name:"ls",age:19},{id:3,name:"ww",age:20},
])//h函数优点 跳过了模板的编译
// parser -> ast -> transform -> js api -> generate -> render
//缺点 学习成本略高
//h函数格式  三个参数依次 创建的节点, 节点属性,节点内容(显示内容)
interface Props{type: 'edit' | 'delete'
}  
const btn = (props:Props,ctx:any)=>{return h('button',{style:{color: props.type === 'edit' ? 'green' : 'red',},onClick : () => {console.log("click");//发送事件ctx.emit('click',1232)}},ctx.slots.default())
}
</script><style scoped>
</style>