Vue3函数式组件

函数式组件

在 Vue 3 中，函数式组件为我们提供了一种简洁高效的方式来创建可复用的 UI 片段。其中，h 方法扮演着至关重要的角色。本文将深入探讨如何使用 Vue 3 的 h 方法来创建函数式组件。

什么是 Vue 3 函数式组件

函数式组件是一种没有实例化过程、无状态、无生命周期钩子的组件。它们仅仅接收输入的属性（props），并返回一个虚拟 DOM 节点。这种组件非常适合用于展示型组件，尤其是当组件逻辑简单且不需要复杂的状态管理时。

h 方法介绍

h 方法是 Vue 3 中的一个用于创建虚拟 DOM 节点的函数。它的全称为 hyperscript，这个函数接受三个参数：

1. 第一个参数：标签名或组件选项对象
   • 如果是一个字符串，那么它代表 HTML 标签名，比如 'div'、'span' 等。
   • 如果是一个组件选项对象，那么它将创建该组件的实例。例如，如果有一个自定义组件 MyComponent，可以传入 MyComponent 这个对象。
2. 第二个参数：一个包含属性（props）和事件监听器的数据对象
   • 这个对象用于设置创建的 DOM 元素或组件的属性。例如，{ class: 'my-class', id: 'my-id' } 可以为元素添加类名和 id。对于事件监听器，可以使用类似 { click: handleClick } 的形式，其中 handleClick 是一个在组件作用域内定义的函数。
3. 第三个参数：子节点（可以是字符串、数组或更多的虚拟 DOM 节点）
   • 可以是简单的文本内容，比如 'This is a text node'。
   • 也可以是一个数组，数组中的元素可以是其他虚拟 DOM 节点，用于创建复杂的 DOM 结构。例如，[h('span', 'Child 1'), h('span', 'Child 2')]。