在 Vue 中，h 函数是用于创建虚拟 DOM (VNodes) 的一种方式，它是 Vue 3 中 render 函数的核心函数。在 Vue 2 中，通常使用模板语法来渲染视图，而 Vue 3 引入了组合式 API (Composition API)，并且更加灵活地使用 h 函数来手动构建虚拟 DOM，提供更强大的渲染能力。
h 函数简介
h 是一个 JavaScript 函数，用来创建虚拟 DOM 节点。它通常作为 render 函数的一部分被使用，可以代替 Vue 的模板语法进行视图渲染。h 的全称是 createElement，它的参数可以是组件、元素类型、属性和子节点。
h 函数的基本语法
h(type, props, children)
- type: 要创建的元素类型。可以是字符串（HTML 标签名）或组件对象。
- props: 组件或元素的属性。这是一个对象。
- children: 子节点，通常是一个数组。可以是字符串、虚拟节点（VNode）或其他组件。
h 的应用示例
-
渲染一个 HTML 元素
import { h } from 'vue'; export default { render() { return h('div', { class: 'container' }, 'Hello, Vue!'); } };
- 在这个示例中，
h('div', { class: 'container' }, 'Hello, Vue!')创建了一个div元素，带有container类名，并且包含文本节点'Hello, Vue!'。
-
渲染一个自定义组件
import { h } from 'vue'; import MyComponent from './MyComponent.vue'; export default { render() { return h(MyComponent, { someProp: 'value' }); } };
- 这里使用
h(MyComponent, { someProp: 'value' })来渲染一个自定义的组件，并传递一个someProp属性。
- 渲染动态内容
你可以根据一些条件动态渲染不同的元素或组件。
import { h } from 'vue'; import MyComponent from './MyComponent.vue'; export default { data() { return { isComponent: true }; }, render() { if (this.isComponent) { return h(MyComponent); } else { return h('div', 'Some other content'); } } };
- 在这个例子中，
isComponent控制渲染哪个内容。根据条件动态选择是渲染组件还是普通的div元素。
详细说明
1. type 参数
type 参数可以是：
- 一个 HTML 标签字符串 ，比如
'div'、'span'等。 - 一个 组件对象，比如一个 Vue 组件。
- 函数式组件 ：Vue 3 中允许函数式组件，因此你也可以直接传递一个函数作为
type。
2. props 参数
props 是一个对象，包含了你想要传递给组件或 HTML 元素的属性。
- 对于 HTML 元素，
props会被转换为 HTML 属性。 - 对于组件，
props会被传递给组件的props。
h('div', { id: 'app', style: { color: 'red' } }, 'Hello World')
在上面的例子中，div 元素会有一个 id 为 app 的属性，并且 style 被设置为红色。
对于组件：
h(MyComponent, { title: 'Vue 3' })
这里将 title 作为 props 传递给 MyComponent 组件。
3. children 参数
children 是可选的，并且可以是一个数组，用于表示子元素或文本内容。
-
文本节点：直接传递文本值作为子节点。
h('div', {}, 'Hello World') // 渲染 <div>Hello World</div> -
多个子节点：可以传递一个数组，数组中的元素可以是文本、虚拟 DOM 节点或其他组件。
h('div', {}, [h('span', {}, 'Child 1'), h('span', {}, 'Child 2')])渲染为：
<div><span>Child 1</span><span>Child 2</span></div>
4. 使用函数式组件
函数式组件不需要实例化，只是简单地返回 VNode。你可以直接使用 h 来渲染函数式组件：
const MyFunctionalComponent = (props) => { return h('div', {}, `Hello, ${props.name}`); }; export default { render() { return h(MyFunctionalComponent, { name: 'Vue' }); } };
结合 Vue 3 组合式 API 使用 h
在 Vue 3 中，使用组合式 API 的时候，h 函数通常会和 defineComponent 一起使用：
import { defineComponent, h } from 'vue'; export default defineComponent({ render() { return h('div', {}, 'Hello from functional component!'); } });
这种方式通常用于不需要模板的情况，或者需要动态生成 DOM 的场景。
h 函数的优势
- 灵活性：可以动态构建虚拟 DOM 节点，允许在代码中更细粒度地控制渲染。
- 性能 ：相比 Vue 的模板渲染，
h渲染通常会更直接，因为它不需要经过模板解析的阶段。 - 可组合性 ：使用
h可以非常灵活地构建嵌套的 VNode，能够根据不同的条件进行动态渲染。
总结
h 函数是 Vue 3 中构建虚拟 DOM 的重要工具，能够让开发者更细致地控制 Vue 组件的渲染。通过 h，你可以更灵活地创建元素、传递属性和子节点，以及在运行时动态决定渲染内容。虽然通常 Vue 的模板语法已经足够方便，但在某些情况下，使用 h 可以提供更强的控制力，尤其是在需要动态渲染复杂内容时。