Vu3中使用h函数

本文主要是介绍Vu3中使用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>

这篇关于Vu3中使用h函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---