Vue 中 Render 函数的模拟

Vue 中 Render 函数的模拟

1. 什么是 Render 函数

Render 函数是 Vue2.0 新增的特性，它允许你利用 JavaScript 的编程能力，创建动态的虚拟 DOM，并将其渲染为真实 DOM。

2. 为什么需要 Render 函数

在 Vue2.0 中，虚拟 DOM 的创建是通过createElement函数完成的，该函数需要传入的参数有三个：

1. 第一个参数是 VNode 节点类型，即标签名，如div、span、ul、li等。
2. 第二个参数是 VNode 节点属性，即标签上的属性，如class、style、id等。
3. 第三个参数是 VNode 子节点，即标签上的子元素。

// 创建一个div标签，并设置id为app作为容器；
<div id="app"></div>;
// 模拟一个createElement函数，该函数接收三个参数，分别代表标签名、标签属性、子节点
// 模拟createElement函数，用于生成虚拟DOM
function createElement(component, props, ...children) {
  const virtualDOM = {
    $$typeof: Symbol("vue.element"),
    key: null,
    ref: null,
    type: null,
    props: {},
  };

  virtualDOM.type = component;
  props &&
    (virtualDOM.props = {
      ...props,
    });
  virtualDOM.props.children = children;
  return virtualDOM;
}

通过上述代码可以看出来虚拟 DOM 的优势在于可以动态创建，但是它无法动态更新，因为虚拟 DOM 的创建是静态的，无法动态更新。而且虚拟 DOM 身上的属性较少，因此相较于真实 DOM，虚拟 DOM 的体积小。

// 首先准备一个工具函数用于遍历对象
const each = (obj, cb) => {
  Reflect.ownKeys(obj).forEach((key) => cb(obj[key], key));
};
// 模拟render函数
function render(virtualDOM, container) {
  const { type, props } = virtualDOM;
  if (typeof type === "string") {
    // 创建标签
    const element = document.createElement(type);
    // 添加标签属性
    each(props, (value, key) => {
      if (key === "class") {
        element.setAttribute("class", value);
      } else if (key === "style") {
        each(value, (styleValue, styleKey) => {
          element.style[
            styleKey.replace(/A-Z/g, (match) => `${match.toLowerCase()}`)
          ] = styleValue;
        });
      } else if (key === "children") {
        const childNode = typeof value === "string" ? [value] : value;
        childNode.forEach((child) => {
          if (typeof child === "string") {
            element.appendChild(document.createTextNode(child));
          } else {
            render(child, element);
          }
        });
      } else {
        element.setAttribute(key, value);
      }
    });
    container.appendChild(element);
  }
}
// 模拟Vue实例
function Vue() {
  Vue.prototype.createElement = createElement;
  Vue.prototype.render = render;
}

可以看到在 Vue 的 render 上面，我们通过createElement来创建标签，然后通过render来渲染标签。并对于虚拟 DOM 的属性进行遍历，根据属性和值去生成不同的 DOM 元素，将这些元素加入容器中。