虚拟DOM 和 Diff 算法

最新推荐文章于 2025-05-04 17:00:01 发布

原创最新推荐文章于 2025-05-04 17:00:01 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vue中的虚拟DOM和Diff算法。虚拟DOM是用JavaScript模拟的DOM树形结构，可减少真实DOM操作，提高渲染效率。Diff算法用于比较两个虚拟DOM的差异，生成补丁对象。Vue 2.x使用VDOM，数据改变时通过Diff算法比对，只渲染不同内容。此外，还提到了引入jsx及render函数的作用。

虚拟DOM 和 Diff 算法

什么是虚拟DOM？

vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息

var vdom1 = {
        tag: 'DIV',
        attr: {
            className: 'box'
        },
        children: [{
            tag: 'UL',
            children: [{
                tag: 'LI',
                content: '1',
                attr: {
                    className: 'item'
                }
            }, {
                tag: 'LI',
                content: '1',
                attr: {
                    className: 'item'
                }
            }, {
                tag: 'LI',
                content: '1',
                attr: {
                    className: 'item'
                }
            }]
        }]
    }

使用虚拟DOM有什么好处？
- 越多的真实dom操作，越损耗性能
- 操作数据要大大的减少性能损耗，提高渲染效率
什么是Diff 算法？
1. diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
2. diff算法来源后端
3. 前端将其应用于虚拟dom的diff算法
4. vue中将虚拟dom的diff算法放在了 patch.js文件中
5. 使用js来进行两个对象的比较（ vdom 对象模型）
6. diff算法是同级比较
7. 给每一个层级打一个标记，这个标记是一个数字（这个数字就是 key ）
diff算法是用来做什么的？

** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **

VDOM的渲染流程
1. 获取数据
2. 根据数据创建VDOM （相当于给对象赋值）
3. 根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )
4. 当数据发生改变后，又会生成新的VDOM
5. 通过 diff 算法比对多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
  一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

jsx 在vue采用的原因

VDOM对象树态繁琐了，如果能像hom结构一样书写就好了，这就引入了 jsx
render函数是做什么的

但是jsx始终还是不能直接去用的，必须转换成对象才能使用，
vue中使用render 函数解析jsx语法，然后换成对象结构，在通过 createElment 生成节点，渲染成
真实DOM