vue h 函数的作用

h 函数是 Vue.js 中的一个内置函数，它是 Vue.js 模板转换为虚拟 DOM 元素的核心函数之一。通过调用 h 函数，我们可以创建虚拟 DOM 元素，然后使用这些虚拟 DOM 元素来构建真实 DOM 页面。

具体来说，h 函数接受三个参数：一个标签名称、一个属性对象和一个子元素数组。下面是一个示例：

const vnode = h('div', { class: 'container' }, [
  h('h1', 'Hello'),
  h('p', 'This is a paragraph.')
])

上面代码中，我们调用 h 函数创建一个名为 vnode 的虚拟 DOM 元素，元素名称为 div，class 属性为 "container"，同时包含一个 h1 和一个 p 子元素，它们分别显示 "Hello" 和 "This is a paragraph."。

在实际开发中，Vue.js 的模板编译器会在我们编写 Vue 代码时自动调用 h 函数，并将模板转换为虚拟 DOM 元素。例如，下面是一个简单的 Vue 组件模板：

<template>
  <div class="container">
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
  </div>
</template>

当 Vue.js 编译器处理上面的模板时，它将自动生成类似下面的 JavaScript 代码：

const vnode = h('div', { class: 'container' }, [
  h('h1', 'Hello'),
  h('p', 'This is a paragraph.')
])

然后，Vue.js 将使用这些虚拟 DOM 元素来构建真实页面，并通过监听属性和状态来更新这些元素。