函数式编程 h函数

<template>
  <div>
    <table border>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.name }}</td>
        <td><Btn type="success">编辑</Btn> <Btn type="error">删除</Btn></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h } from "vue";
// 1.template 模板书写风格 2.tsx编写风格  3.函数式组件  h函数
// h函数的源码 createVode
// h函数的优势 跳过了模板的编译
// parse -> ast -> transform -> js api ->generate ->render
let list = reactive([
  {
    id: 1,
    name: "zs",
    age: 18,
  },
  {
    id: 2,
    name: "li",
    age: 18,
  },
  {
    id: 3,
    name: "wr",
    age: 18,
  },
  {
    id: 4,
    name: "mz",
    age: 18,
  },
]);
interface Props {
  type: "success" | "error";
}
let Btn = (props: Props, ctx: any) => {
  // 第一个参数是创建的节点，第二个参数是节点的属性，第三个参数是节点的内容
  return h(
    "button",
    {
      style: {
        color: props.type === "success" ? "green" : "red",
      },
      onClick: () => {
        if (props.type == "success") {
          console.log("编辑");
        } else {
          console.log("删除");
        }
      },
    },
    ctx.slots.default()
  );
};
</script>

<style></style>

效果图：