Vue中的h函数和render函数的区别

 h 函数的作用

• h 函数（即 createElement 函数）用于创建虚拟 DOM 节点。
• 它接收参数（如标签名、属性、子节点等），并返回一个虚拟 DOM 节点对象。
• 你可以把 h 函数看作是一个“构建工具”，用来描述虚拟 DOM 的结构。

示例：

const vnode = h('div', { class: 'container' }, 'Hello World');

• 这里，h 函数创建了一个虚拟 DOM 节点，表示 <div class="container">Hello World</div>。

---

 render 函数的作用

• render 函数是 Vue 组件的一个选项，用于定义如何生成虚拟 DOM。
• 它调用 h 函数来构建虚拟 DOM 节点，并返回最终的虚拟 DOM 树。
• render 函数是真正执行生成虚拟 DOM 的地方，而 h 函数是 render 函数用来构建节点的工具。

示例：

export default {
  render(h) {
    return h('div', { class: 'container' }, 'Hello World');
  }
};

• 在这个例子中，render 函数调用 h 函数生成虚拟 DOM，并返回结果。

---

 两者的关系

• h 函数：负责创建单个虚拟 DOM 节点。
• render 函数：负责组织多个 h 函数的调用，生成完整的虚拟 DOM 树。

类比：

• 如果把生成虚拟 DOM 比作盖房子：

  • h 函数是砖块、水泥等建筑材料。
  • render 函数是建筑师，决定如何使用这些材料盖房子。

---

总结

• h 函数：用于构建虚拟 DOM 节点（单个节点）。
• render 函数：调用 h 函数，生成完整的虚拟 DOM 树，并返回给 Vue。

换句话说：

• h 函数是工具，负责创建节点。
• render 函数是过程，负责组织节点并生成最终的虚拟 DOM。

 render 函数是生成虚拟 DOM 的“过程”，而 h 函数是生成虚拟 DOM 的“工具”。