虚拟dom

1.虚拟dom出现的原因

随着程序越来越复杂，dom操作越来越频繁，性能消耗会比较大；

2.解决思路

因为js执行速度非常快，

vdom最根本原理和解决方案：用js模拟DOM结构，计算出最小的变更，操作真实的dom；

3.具体解决方案

1.用js模拟dom结构

   

• item1

   

• item2

用vnode模拟以上html片段（这个结构没有固定标准）

{

                tag: 'ul',

                props: {'className': 'list'},

                children: [

                    {tag: 'li', children: 'item1'},

                    {tag: 'li', children: 'item2'}

                ]

            }

2.js模拟完了之后如何去用？截下来通过snabbdom库（vdom库）阐述；vue就是参考他实现的diff算法；

h函数和patch函数

h函数：返回的的是一个vnode

patch函数：（1）初次渲染：patch(container,vnode)container:空的div标签；

                            执行patch把虚拟dom渲染到这个节点上；

（2）更新：patch(newvnode,oldvnode)

                              比对两颗虚拟dom的差异，局部更新真是Dom

总结：

用js模拟DOM结构（vnode）

新旧vnode对比，得出最小的更新范围。最后更新DOM

数据驱动视图模式下，有效控制DOM操作