虚拟DOM本质上是对DOM的抽象描述，就是一个普通的js对象。他身上的属性要比真实DOM的属性要少得多。

在一定情况下，使用虚拟DOM的性能要逊于直接使用真实DOM。

例如，在页面一开始的时候，Vue需要先通过生成虚拟DOM树，在根据虚拟DOM树创建真实DOM挂载到页面上，那么要比直接创建真实DOM进行挂载要多一步，理论上这里使用vue反倒会慢一些，但是几乎没有差别。

vue这个框架属于声明式代码，原生的属于命令式代码。

原生对比起框架，理论上性能一定比较好。

例如修改了一个DOM的文本，原生可以做到直接修改具体dom的文本，而框架需要通过diff找到最小更新量，然后进行修改。

但原生要做到极致的性能，往往花费的时间要更多，这无疑是性价比不高的做法。

并且原生写的代码难以维护，而框架写的代码不仅将很多重复的操作进行了结合，例如操作操作真实DOM，大大提高了我们的开发效率，也增强了代码的可维护性。

虚拟DOM的意义在于为Diff算法服务。

Vue在组件更新时，会生成新的虚拟DOM树，然后进行新旧两树的对比，完成更新。其中对比更新，不是进行真实DOM的一个更新，而是通过虚拟DOM进行比较更新。

我们简单的了解一下虚拟DOM的意义。

接下来我们用代码来简单说明一下虚拟DOM和渲染器。

这一部分不是“源码解读”，但可以让我们帮助我们增加对虚拟DOM和渲染器的理解。

假设我们有这样一个模板

<div @click="()=>{console.log(123)}">123<imgsrc="https://img0.baidu.com/it/u=1628473271,2485762845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695"alt="这是一张图片"/></div>

那么用虚拟DOM怎么描述呢

const vnode = {tagName: "div",props: {onClick: () => {console.log(123);}},children : ["123",{tagName : "img",props : {src : "...",alt : "这是一张图片"}}]
}

非常简单的一个js对象

为了简化这个对象的生成，我们创建一个类和一个函数来帮助我们。

首先创建一个虚拟DOM的一个类。

/** 简易化虚拟DOM */export class Vnode  {constructor (tagName,props = {},children = []) {this.tagName = tagName;this.props = props;this.children = children;}
}

然后写一个虚拟DOM创建函数

// 这里写的其实就是vue render函数里面的h函数
// h函数就是一个辅助创建虚拟DOM的工具函数export const createVnode = (tagName,props,children) => {return new Vnode(tagName,props,children);
}

这里的createVnode函数其实就是我们render函数的里的参数函数h。

那虚拟DOM创建好了，就需要通过渲染器生成真实DOM挂载到对应节点上。

mountElement就是通过vnode生成真实DOM挂载到对应的节点上。

function mountElement(vnode, container) {if (typeof vnode === "string") { //字符串节点container.appendChild(document.createTextNode(vnode)); // 创建文本节点直接挂载return;}const el = document.createElement(vnode.tagName);const {props} = vnode;for (const key in props) {if (Object.hasOwnProperty.call(props, key)) {if (key.startsWith("on")) {// 事件属性const eventType = key.substring(2).toLowerCase();el.addEventListener(eventType, props[key]);} else {el[key] = props[key];}}}const {children} = vnode;if (typeof children === "string") {// 子节点是个字符串节点el.appendChild(document.createTextNode(children));} else if (Array.isArray(children)) {// 子节点是一个子节点数组时,递归创建节点并挂载到当前节点children.forEach(node => mountElemnet(node, el));}container.appendChild(el);
}

为了后续进行统一处理，我们封装一个渲染器函数renderer

function renderer(vnode, container) {// 一个普通DOM元素节点mountElement(vnode, container);
}

此时已经可以处理普通的虚拟DOM。

const vnode = createVnode("div", {onClick: () => {console.log(123);}
},["123",createVnode("img", {src : "https://img0.baidu.com/it/u=1628473271,2485762845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695",alt : '这是一张图片'}),])renderer(vnode,document.querySelector("#app"));

那如果是组件对象怎么办呢？

对于组件对象，我们这么描述

const myComponent = {tagName: "Component",render() {const a =  h("div", {onClick: () => {console.log(123);}}, ["123",h("img", {src: "https://img0.baidu.com/it/u=1628473271,2485762845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695",alt: '这是一张图片'}),])console.log(a);return a;}
}

是不是跟我们平常写的组件有点类似

那么其实相比较虚拟DOM，其实就是多一个步骤，调用组件对象的render函数生成虚拟DOM树。

function mountComponent(comp, container) {// 用来挂载组件对象const subtree = comp.render(); // 调用render函数生成虚拟DOM树renderer(subtree, container);
}/*** * @param {Vnode} vnode 虚拟DOM树* @param {DOM} container 挂载的DOM */
export function renderer(vnode, container) {if (vnode.tagName === "Component") {// 说明是一个组件节点mountComponent(vnode, container);} else if (typeof vnode.tagName === "string") {// 说明是一个普通DOM元素节点mountElement(vnode, container);}
}

那么这样的一个渲染器就可以渲染组件对象了。

const myComponent = {tagName: "Component",render() {const a =  h("div", {onClick: () => {console.log(123);}}, ["123",h("img", {src: "https://img0.baidu.com/it/u=1628473271,2485762845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695",alt: '这是一张图片'}),])console.log(a);return a;}
}renderer(myComponent, document.querySelector("#app"))

通过一个简单渲染器大概知道了渲染器是做什么的。

当然通过h函数写虚拟DOM，我们平常很少这么做，比较麻烦。

而是通过类html的语法写template，而我们写的模板，最后都会通过一个模板编译模块生成render函数。

所以我们开发能够这么方便，要多亏Compiler这个模板编译器。

这里还涉及到两种编译状态，一个是运行时编译，这个不常见，就是Compiler将模板编译成render函数是发生在页面创建的时候，这个时候会消耗一定的性能，且可能会带来页面短暂白屏的问题。

另一个就是预编译，我们一般用的都是这个，就是我们用脚手架搭建的项目，最后打包结果里一般是没有Compiler这个模块的代码的，且也不会有模板代码，模板代码已经编译成render函数。

使用虚拟DOM既然是为了diff算法服务的，那么为什么不用真实DOM进行对比呢？

这里我说一下我的理解，一方面虚拟DOM属于JS层面的，真实DOM属于渲染引擎层面的，js执行线程直接操作js对象一定要比操作真实DOM要快。我们也都知道直接操作真实DOM的代价是比较昂贵的，所以虚拟DOM + diff 的目的就是让我们尽可能少的操作真实DOM。

另一方面，虚拟DOM描述的属性比较少，当然这一点我感觉没什么，因为Vue3的patchflag可以解决这个问题，还有一个问题，我觉得应该就是重排重绘的问题，我们都知道访问一些DOM信息的api时，浏览器为了获取实时的信息，会强制性重排重绘。那么如果用的真实DOM进行diff的话，不免会涉及到offsetWidth等一些属性的比对，这我觉得应该也是虚拟DOM的一个优势。

好了大概就讲这么多了，东西虽然比较浅，但是应该也能有所收获吧。