当前位置：首页 > article >正文

Vue学习记录之二十一 Vue3中3种编程风格介绍

article 2025/2/28 20:08:34

在Vue3中，我们一般使用template、tsx、函数式组件（h函数）

一、template风格

<template>
    <div class="lmb">lvmanba</div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped>

</style>

二、tsx风格

需要在vite+vue构建的时候选择支持jsx，或者自行安装。
详见 https://blog.csdn.net/LvManBa/article/details/142926978

<script lang="tsx">
import { defineComponent, defineProps } from "vue"
const childAbc = () => {
  return (<div>childAbc</div>)
}
const childCbd = (props, ctx) => {
  console.log(props, ctx, "childCbd")
  const { emit } = ctx;
  setTimeout(() => {
    //emit事件给父组件
    emit('listen', 8888)
  }, 2000);
  return (
    <>
      <div>childCbd</div>
      <div>mytime</div>
      <div>{props.msg}</div>
    </>
  )
}

export default defineComponent({
  name: "ChildWorld",
  setup(props, ctx) {
    const todo = (val) => {
      console.log(val, "todo")
    }
    return () => (<div>Hello World
      <childAbc />
      事件加onSomeThing,这里的on代表监听子组件事件，子组件需要去掉on来emit事件
      <childCbd msg="abc" onListen={todo} />
      < /div>);
  }
})
</script>

三、函数式组件（h函数）

在使用页面通过导入h函数，用于创建虚拟 DOM 节点。vue3中很少使用h函数。

import {ref,reactive,h} from 'vue'

h函数的本质是对createVnode进行了封装，优势是跳过了模版的编译。

总结流程

1、模板解析（Parser）：Vue 的模板被解析为 AST 树结构。
2、AST 优化：静态节点和动态节点的标记优化，减少不必要的渲染。
3、代码生成：将 AST 转换为渲染函数，这个函数通过调用 h 函数来创建虚拟 DOM。
4、渲染函数执行：渲染函数执行时，h 函数会生成虚拟 DOM 树（VNode）。
5、VNode -> 真实 DOM：虚拟 DOM 树被 diff 和 patch，更新为真实的 DOM。

h 函数在这个流程中主要作用是：将 AST 转换为渲染函数，渲染函数调用 h 函数生成虚拟 DOM 树，最后虚拟 DOM 树通过 diff 算法转换为真实 DOM。

使用h函数

以下是 h 函数在 Vue 3 中的执行流程的大致步骤：
参数接收： h 函数通常接收三个参数：
第一个参数是标签名或组件(创建节点)。
第二个参数是属性对象（节点属性）。
第三个参数是子节点或文本（节点内容）。

h('div', { class: 'container' }, 'Hello World')

如果只传递了一个参数，且该参数为字符串或组件，则默认没有属性和子节点。
如果只传递了两个参数，需要判断第二个参数是属性对象还是子节点。
如果传递了三个参数，则分别对应标签、属性和子节点。

function h(type, propsOrChildren, children) {
  const l = arguments.length
  if (l === 2) {
    // 如果第二个参数是数组或字符串，视为子节点
    if (isArray(propsOrChildren) || isVNode(propsOrChildren)) {
      return createVNode(type, null, propsOrChildren)
    }
    // 如果第二个参数是对象，视为属性
    if (isObject(propsOrChildren)) {
      return createVNode(type, propsOrChildren, null)
    }
  } else {
    // 三个参数分别为类型、属性和子节点
    return createVNode(type, propsOrChildren, children)
  }
}

一般使用的场景为按钮或者弹出框

按钮实例

<template>
    <table border>
        <tr>
        <th>name</th>
        <th>age</th>
        <th>address</th>
        <th>操作</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.age}}</td>
            <td>{{ item.address}}</td>
            <td>
                <Btn type="success" :id="item.id">编辑</Btn>
                <Btn type="error" :id="item.id">删除</Btn>
            </td>
        </tr>
    </table>
</template>
<script setup lang='ts'>
import { ref,reactive,h } from 'vue'
import WelcomeItem from './components/WelcomeItem.vue';
let list = reactive([
    {id:1,name:'lmb1',age:21,address:'jilin'},
    {id:2,name:'lmb2',age:22,address:'jilin'},
    {id:3,name:'lmb3',age:23,address:'jilin'},
    {id:4,name:'lmb4',age:24,address:'jilin'},
    {id:5,name:'lmb5',age:25,address:'jilin'},
    {id:6,name:'lmb6',age:26,address:'jilin'},
    {id:7,name:'lmb7',age:27,address:'jilin'},
    {id:8,name:'lmb8',age:28,address:'jilin'},
])
interface Props{
    type: 'success'|'error'|'warning'
    id: number
}
const Btn = (props:Props,ctx:any) =>{
    return h('button',
    {
        style:{
            color:props.type ==='success'?'green':'red'
        },
        onClick:()=>{
            //ctx.emit('click',123123)
            if(props.type == 'success'){
                console.log('编辑'+props.id)
            }else{
                console.log('删除'+props.id)
            }
            //console.log('click',props.id)
        }
    }, ctx.slots.default())
}
</script>