Vue3中的h函数及使用小结

下面我将详细讲解“Vue3中的h函数及使用小结”，并提供两个示例。

什么是h函数？

在 Vue3 中，模板语法(vue模板语法)和渲染的实现方式都有所变化。引入了 h 函数，即类似于 React 中的 jsx，在开发中可以使用 h 函数来手写渲染函数。

h 函数是 Vue3 用来创建 VNode（Vue的虚拟节点）的函数，使用 h 函数可以手写 template 模板所代替的 render 函数。也就是说，可以使用 h 函数创建 VNode，这些 VNode 会被 diff 算法和 Vue 内部的生命周期函数识别和操作。h 函数接收三个参数：

h(
  // 组件或 HTML 标签名称
  string | Component | object,
  // 包含标签属性的数据对象
  Object,
  // 子节点(VNodes)的数组
  Children
): VNode

h函数使用小结

h 函数完整的语法结构为 h(tag，props，children)，创建的 VNode 通过 render 函数渲染，render 函数的使用不再依赖于 .vue 文件，而是转换为了一个函数，并需要在 setup 函数中进行书写。下面我们来看下 h 函数的使用：

示例一：使用 h 函数创建可复用的组件

// 简单的图片组件
const MyImage = (props, context) => h('img', { src: props.src, alt: props.alt })

// 使用 MyImage 组件
const app = Vue.createApp({
  setup() {
    return () => h(MyImage, { src: 'http://xxx.com/images/a.jpg', alt: 'image' })
  }
})

app.mount('#app')

在上面的示例中，我们使用 h 函数创建了一个简单的图片组件 MyImage，并通过 src 和 alt 两个属性来向组件传递参数。在 app 的 setup 函数中，我们使用了箭头函数返回我们需要的 VNode。

示例二：使用 h 函数创建动态组件

const app = Vue.createApp({
  data() {
    return {
      activeComponent: 'componentA'
    }
  },
  components: {
    componentA: {
      setup() {
        return () => h('div', {}, 'This is component A!')
      }
    },
    componentB: {
      setup() {
        return () => h('div', {}, 'This is component B!')
      }
    }
  },
  render() {
    return h(this.activeComponent)
  }
})

app.mount('#app')

我们在 data 中依赖了一个变量 activeComponent，用来表示当前使用的组件。在组件列表中，有两个动态组件 componentA 和 componentB。 在 render 函数中，我们返回了当前 activeComponent 的组件实例，使用 VNode 来表示这个组件。

以上是两个简单的示例，我们可以看到 h 函数的基本使用方法。通过 h 函数，我们可以手动创建组件和动态组件。当然，h 函数不需要过度使用，简单的模板语法还是很方便的，但使用 h 函数会带来更高的自由度和灵活性。