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>