浅识vue的虚拟DOM和渲染器

天天向上的鹿茸

已于 2022-12-09 15:15:30 修改

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-26 16:52:16 首次发布

本文链接：https://blog.csdn.net/weixin_45696837/article/details/128053944

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

虚拟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<img
        src="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 => mountElement(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的一个优势。

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