vue中创建组件的几种方式，你都会吗？

h函数

h() 函数是用于创建虚拟 DOM 节点的函数。

h() 函数的参数

• type 参数可以是字符串或组件。如果它是字符串，则表示元素标签名。如果它是组件，则表示要创建的组件。
• props 参数可以是对象或 null。如果它是对象，则表示元素的属性。如果它是 null，则表示元素没有属性。
• children 参数可以是数组或 null。如果它是数组，则表示元素的子节点。如果它是 null，则表示元素没有子节点。

h() 函数可以用来创建任何类型的虚拟 DOM 节点，包括元素、文本节点、组件等。

例如要实现如下效果

import {
    createApp, h } from '../lib/vue.esm-browser.js'

const app = createApp(h('div', {
   
    style:{
   backgroundColor: 'red', width: 'fit-content', height: '50px'}, 
    onClick:()=>alert('父盒子')
}, [
    h('div', null, '子盒子')
]))

app.mount('#app')

render函数

用于编程式地创建组件虚拟 DOM 树的函数。实际内部使用的是h()

const app = createApp({
    
    render() {
   
        return h('div', {
   
            style: {
    backgroundColor