近期在研究学习Vue框架，对其中的渲染器感兴趣，在浏览器平台上，用它来渲染其中的真实DOM元素。渲染器不仅能够渲染真实的DOM元素，它还是框架跨平台能力的关键。所以在设计渲染器的时候一定要考虑好自定义的能力。那如何自行设计渲染器呢？

渲染器+响应系统

最简渲染函数是使用以下函数渲染静态字符串或者动态拼接内容：

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

vuereactivity：

@vue/reactivity 包包含了副作用函数 effect 以及响应式 ref

渲染器基本原理

渲染器 renderer，渲染 render

虚拟节点（vnode） === 虚拟 DOM（vdom）

渲染器把虚拟 DOM 节点渲染为真实 DOM 节点的过程叫作挂载（mount）

第一次渲染称为挂载

后续渲染称为打补丁（patch），也即更新 dom

DIY 渲染器

createRenderer 函数

这是一个构建渲染器的函数，特别留意其中的打补丁 patch 函数的编写！

patch 的三个参数分别指：旧 vnode，新 vnode，挂载位置

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;
  }
}

构建一个 vnode 然后渲染它

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

兼容所有浏览器渲染需求

可以将配置项交予渲染者进行定义，而不写死，这样就可以适配多浏览器了！

首先在渲染器函数内定义三大配置项：

定义 mountElement

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

好了，今天关于Vue框架中自行设计渲染器的方法及相关代码的内容就是这些，如果你看完后喜欢的话记得收藏哦！