快速了解虚拟DOM和diff算法

什么是 虚拟DOM？
虚拟DOM是一个用来 展示真实DOM的对象
真实DOM

 <div id="app">
        <ul id='list'>
            <li class='item'>张三</li>
            <li class='item'>李四</li>
            <li class='item'>王五</li>
        </ul>
    </div>

对应的虚拟DOM

let oldVDOM = { // 旧虚拟DOM
        tagName: 'ul', // 标签名
        props: { // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
                tagName: 'li', props: { class: 'item' }, children: ['张三']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['李四']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['王五']
            },
        ]
    }

当我们修改一个li标签他就会生成一个新的 虚拟DOM

let newDOM= { // 旧虚拟DOM
        tagName: 'ul', // 标签名
        props: { // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
                tagName: 'li', props: { class: 'item' }, children: ['张三']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['李四']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['王五哈哈']
            },
        ]
    }

这个就是新旧两个虚拟DOM，这个时候我们直接拿新的虚拟DOM去渲染成真实的DOM的话，效率真的会比直接操作DOM高吗？

由上面的图可以看出来，肯定是第二种方式比较快，因为第一中间夹着一个虚拟DOM的操作，所以说 虚拟DOM比真实DOM快这句话是不严谨的。应该这样子说 虚拟DOM算法操作真实DOM，性能高于直接操作DOM 虚拟DOM算法 = 虚拟DOM+Diff算法

什么是diff算法？

上图中，其实只有一个 li 标签修改了文本，其他是不变的，所以没必要所有的都更新，只更新这个 li 标签就行了

总结：Diff算法是一个对比的算法，对比两者是 新虚拟DOM和旧虚拟DOM，对比是那个 虚拟节点 更改了，找出这个虚拟节点，并只更新这个虚拟节点对应的真实节点，而不用更新其他数据没有更新的节点 实现 精准的 更新真实DOM 进而提高效率