虚拟dom && diff算法（王者）

最新推荐文章于 2024-09-01 08:17:56 发布

原创最新推荐文章于 2024-09-01 08:17:56 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

Vue基础专栏收录该内容

16 篇文章

订阅专栏

本文介绍了虚拟DOM和Diff算法。虚拟DOM是模拟真实DOM节点结构的Object对象模型，使用基本流程包括获取数据、创建vdom等。Diff算法用于比较两个文件差异，生成补丁对象。前端将其应用于虚拟DOM，如Vue将相关算法放在patch.js文件中，利用惰性原则更新页面。

1. 虚拟dom是什么？

简称vdom,它是一个Object对象模型，用来模拟真实dom节点的结构

2. 虚拟dom的使用基本流程

获取数据（ ajax fetch ）

创建vdom

vdom的由来？
但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型
// 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript // + xml 搞出了一个新的语法糖 jsx ，用jsx来模拟vdom

	 <!-- vdom对象模型 -->
    var vdom = {
                tag: 'div',
                attr: {
                    className: 'box'
                },
                content: [{
                    tag: 'ul',
                    content: [{
                            tag: 'li',
                            content: data.name
                            }]
                    }]
            }

通过render函数解析jsx(javascript + xml)，将其转换成 vdom结构
将vdom渲染成真实dom---------------------render函数
数据更改了
使用diff算法比对两次vdom,生成patch对象
根据key将patch对象渲染（再次利用render函数）到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（虚拟dom的惰性原则）

3. diff算法是什么？

diff算法是比较两个文件的差异，并将这两个文件不同之处生成一个补丁对象（patch）。diff算法来源后端
前端将其应用于虚拟dom的diff算法

4. diff算法运行结束之后，返回什么？

patch对象

5. 前端如何将其应用于虚拟dom的diff算法？

vue中将虚拟dom的diff算法放在了patch.js文件中，使用js来进行两个对象的比较（ vdom 对象模型）
根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（虚拟dom的惰性原则）
注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom

深化： Vue vdom vs React vdom 有何不一样？