Vue 内部的组件是以虚拟 dom 形式存在的。下面的代码就是一个很常见的虚拟 Dom，用对象的方式去描述一个项目。相比 dom 标签相比，这种形式可以让整个 Vue 项目脱离浏览器的限制，更方便地实现 Vuejs 的跨端

渲染器是围绕虚拟 Dom 存在的。在浏览器中，我们把虚拟 Dom 渲染成真实的 Dom 对象，Vue 源码内部把一个框架里所有和平台相关的操作，抽离成了独立的方法。所以，我们只需要实现下面这些方法，就可以实现 Vue 3 在一个平台的渲染。

首先用 createElement 创建标签，还有用 createText 创建文本。创建之后就需要用 insert 新增元素，通过 remote 删除元素，通过 setText 更新文本和 patchProps 修改属性。 然后再实现 parentNode、nextSibling 等方法实现节点的查找关系。完成这些工作，理论上就可以在一个平台内实现一个应用了。 在 Vue 3 中的 runtime-core 模块，就对外暴露了这些接口，runtime-core 内部基于这些函数实现了整个 Vue 内部的所有操作，然后在 runtime-dom 中传入以上所有方法。

下面的代码就是 Vue 代码提供浏览器端操作的函数，这些 DOM 编程接口完成了浏览器端增加、添加和删除操作，这些 API 都是浏览器端独有的，如果一个框架强依赖于这些函数，那就只能在浏览器端运行。


if (tag === 'select' && props && props.multiple != null) {
  ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
}

return el


在后面的代码中，我们通过 createRenderer 函数区创建了一个渲染器。通过参数 options 获取增删改查所有的函数以后，在内部的 render、mount、patch 等函数中，需要去渲染一个元素的时候，就可以通过 option.createElement 和 option.insert 来实现。


自定义渲染器让 Vue 脱离了浏览器的限制，我们只需要实现平台内部的增删改查函数后，就可以直接对接 Vue 3。比方说，我们可以把 Vue 渲染到小程序平台，实现 Vue 3-minipp；也可以渲染到 Canvas，实现 vue 3-canvas，把虚拟 dom 渲染成 Canvas；甚至还可以尝试把 Vue 3 渲染到 threee.js 中，在 3D 世界使用响应式开发。


let sceneObj = new THREE[scene]()

let geometryObj = new THREE[geometry]( ...geometryArg)
let materialObj = new THREE[material]()

let meshObj = new THREE[mesh]( geometryObj, materialObj )
meshObj.rotation.x = meshX
meshObj.rotation.y = meshY
sceneObj.add( meshObj )
renderer.render( sceneObj, cameraObj );


remove: (child) => {
  const parent = child.parentNode;
  if (parent) {
    parent.removeChild(child);
  }
},

createElement: (tag, isSVG, is) => {
  let element;
  if (tag === "Rectangle") {
    // 创建一个矩形
    element = new window.PIXI.Graphics();
    element.lineStyle(4, 0xff3300, 1);
    element.beginFill(0x66ccff);
    element.drawRect(0, 0, 64, 64);
    element.endFill();
    element.x = 0;
    element.y = 0;
    // Opt-in to interactivity
    element.interactive = true;

    // Shows hand cursor
    element.buttonMode = true;
  } else if (tag === "Sprite") {
    element = new window.PIXI.Sprite();
    element.x = 0;
    element.y = 0;
  } else if (tag === "Container") {
    element = new window.PIXI.Container();
    element.x = 0;
    element.y = 0;
  }

  return element;
},

createText: (text) => doc.createTextNode(text),

createComment: (text) => {
//   console.log(text);
},

setText: (node, text) => {
  node.nodeValue = text;
},

setElementText: (el, text) => {
  el.textContent = text;
},

parentNode: (node) => node.parentNode,

nextSibling: (node) => node.nextSibling,

querySelector: (selector) => doc.querySelector(selector),

setScopeId(el, id) {
  el.setAttribute(id, "");
},

cloneNode(el) {
  return el.cloneNode(true);
},


自定义渲染器的原理，就是把所有的增删改查操作暴露出去，使用的时候不需要知道内部的实现细节，我们只需要针对每个平台使用不同的 API 即可。

就像武侠小说中高手可以通过给你传输内力的方式控制你进行比武。我们打出去的每招每式都是来源于背后的高手，只不过自己做了简单的适配。在 Vue 渲染器的设计中就把 document 所有的操作都抽离成了 nodeOps，并且通过调用 Vue 的 createRenderer 函数创建平台的渲染器。

只要我们实现了 Canvas 平台的增删改查，就可以在 Canvas 的世界中使用 Vue 的响应式语法控制绘图和做游戏，Vue 生态中对小程序和原生 app 的支持原理也是基于自定义渲染器实现的。

自定义渲染器也代表着适配器设计模式的一个实践。除了自定义渲染器 API 的学习，我们也要反思一下自己现在负责的项目中，有哪些地方为了不同的接口或者平台写了太多的判断代码，是否也可以使用类似自定义渲染器的逻辑和模式，把多个组件、平台、接口之间不同的操作方式封装成一个核心模块，去进行单独函数的扩展。

后面有空再写： Vue 如何在 node 环境中渲染呢？