Vue渲染器设计实现流程详细讲解

// 渲染函数
function renderer(domString, container) {
  container.innerHTML = domString;
}
// 渲染dom
renderer("<p>123</p>", document.getElementById("main"));

function createRenderer() {
  // dom更新函数
  function patch(n1, n2, container) {}
  // 渲染函数
  function render(vnode, container) {
    // 如果虚拟DOM存在，则执行更新程序
    // 如果不存在，就挂载它
    if (vnode) {
      patch(container._vnode, vnode, container);
    } else {
      if (container._vnode) {
        container.innerHTML = "";
      }
    }
    container._vnode = vnode;
  }
}

const vnode = {
  type: "h1",
  children: "helloworld",
};
const renderer = createRenderer();
renderer.render(vnode, document.querySelector("#main"));

function createRenderer() {
  // 定义三大配置项
  const { createElement, insert, setElementText } = options;
  function mountElement(){...}
}

// 挂载元素函数
function mountElement(vnode, container) {
  // 判断元素类型
  const ele = createElement(vnode.type);
  // 如果类型为string，那么设置文本
  if (typeof vnode.children === "string") {
    setElementText(ele, vnode.children);
  }
  // 将新元素插入到指定挂载点
  insert(ele, container);
}