The h Function in Vue

1. The createElement Method

The common DOM operations in HTML are modifying DOM nodes and accessing DOM nodes.

Beyond those, the W3C has also published technical standards for creating and deleting DOM nodes.

The createElement method is used to create a DOM node. createElement() usually needs to be used together with the appendChild() or insertBefore() methods.

Among them:

The appendChild() method is used to insert a new node at the end of the specified child node list.
The insertBefore() method is used to insert a new node before a specified existing child node.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="parentElement">
      <span id="childElement">子节点</span>
    </div>
    <button onclick="myFunction()">点我新增子节点</button>
    <script>
      function myFunction() {
        var btn = document.createElement("BUTTON");
        var text = document.createTextNode("新增加的按钮");
        btn.appendChild(text);
        var exist_node = document.getElementById("childElement");
        document.getElementById("parentElement").insertBefore(btn, exist_node);
        //window.document.body.appendChild(btn);
      }
    </script>
  </body>
</html>

2. Vue Custom Rendering

In Vue there are two ways to write page rendering:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 使用 template
new Vue({
  template: "<div>{{ hi }}</div>",
});

// 使用 render 方法
new Vue({
  render(h) {
    return h("div", this.hi);
  },
});

In fact, when Vue calls the mounted method, it compiles the template into a render method. Rendering with template is less efficient than rendering with render.

Vue’s rendering is functionally similar to the W3C’s createElement method. Vue also has a createElement method. Unlike the W3C’s createElement method, Vue’s createElement method does not operate on the DOM directly, but on VNodes.

3. The h Method in Vue

The h method in Vue is shorthand for the createElement method.

First, let’s analyze how Vue renders:

Vue uses _render to render an instance into a VNode. The main processing logic in _render is:

1
vnode = render.call(vm._renderProxy, vm.$createElement);

As you can see, Vue passes vm.$createElement to the render method. And the createElement method is a wrapper around the _createElement method.

1
2
3
4
5
6
7
_createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
)

Here context is the context environment of the VNode. With this, the parameter list of the createElement method — or the h method — becomes understandable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步方法，必要参数。
  "div",

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    "先写一些文字",
    createElement("h1", "一则头条"),
    createElement(MyComponent, {
      props: {
        someProp: "foobar",
      },
    }),
  ],
);