Vue.js使用h函数来创建虚拟Dom

 大家好~ 我是前端uio，本文主要介绍使用Vue.js中的h函数来创建虚拟Dom。有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、介绍

        Vue.js 的虚拟 DOM 创建 API (通常简称为 h 函数) 是一个核心特性，用于创建虚拟 DOM 节点。虚拟 DOM 是实际 DOM 的轻量级抽象，Vue 使用它来优化 DOM 的更新过程。h 函数的全称是 "hyperscript"，源自允许开发者用 JavaScript 编写 HTML 结构的库，这个约定被多种虚拟 DOM 实现采用，包括 Vue 的实现。

二、基本内容

        1.基本签名

h(tagName, [data], [children])

        i）tagName              ：一个字符串，指定要创建的 HTML 元素类型。

        ii)  data (可选)          ：包含各种属性，如 style、class、以及其他 DOM 属性（如onClick等）

      iii）children  (可选)  ：虚拟节点数组，或者如果只有一个文本节点，则为一个字符串。

        2.工作原理

            i）h 函数允许开发者用 JavaScript 对象描述 HTML 树。当 Vue 组件需要渲染时，会调用 h 函数来生成一个虚拟节点（或 vnode），Vue 使用它来有效地更新真实 DOM。

           ii） 示例

                ① 从vue中导入h函数

import { h } from 'vue';

              ② 创建虚拟节点 

                在本例子中，创建了一个包含两个子元素的 div 虚拟节点。div 有一个类名 .test，其第一个子元素是一个 h1，拥有 id 为 title，内容为 "Hello, h function!"。第二个子元素是一个 p，拥有类名 .subtitle，内容为 "This is an example of using the h function."

// 创建一个虚拟节点
const vnode = h('div', {
  class: 'test', // 应用到 div 的类名
}, [
  // 创建一个 h1 元素作为 div 的第一个子元素
  h('h1', {
    id: 'title', // 应用到 h1 的 id
  }, 'Hello, h function!'), // h1 的内容

  // 创建一个 p 元素作为 div 的第二个子元素
  h('p', {
    class: 'subtitle', // 应用到 p 的类名
  }, 'This is an example of using the h function.'), // p 的内容
])

                ③ 具体使用（渲染虚拟Dom） 

<script setup>
import { h, render } from 'vue'

// 创建渲染函数
const renderFn = () => h('div', {
  class: 'test',
}, [
  h('h1', {
    id: 'title',
  }, 'Hello, h function!'),
  h('p', {
    class: 'subtitle',
  }, 'This is an example of using the h function.'),
])

// 使用 render 函数渲染到一个容器中
const container = document.querySelector('#app')
render(renderFn(), container);
</script>

3.使用h函数的原因

        i）动态 UI 创建的灵活性 

        当你需要基于条件或数据生成动态 UI 元素时，h 函数特别有用。它提供了灵活性，可以即时构建元素，而不受静态模板的限制。

       ii）性能优化

       使用 h 函数有时可以带来性能提升。由于 Vue 可以直接处理由 h 创建的虚拟节点，它可以减少更新 DOM 所需的工作量，从而加快渲染时间。

      iii）Composition API 

      随着 Vue 3 的引入，h 函数因 Composition API 而变得更加核心。这个新的 API 鼓励开发者使用函数来封装和重用组件间的逻辑，h 函数完美契合这种范式。

三、 总结与思考

1.如何在组件封装时运用h函数，有什么需要注意的内容

2.h函数的渲染机制