1. 介绍

在JS里写好DOM的数据结构，然后通过document.createElement放进页面里，在下次数据更新的时候和之前的数据对比，就可以只更新数据变化的部分，不用整个DOM都更新，提升了性能

2. JS实现DOM

虚拟DOM1.jpeg 虚拟DOM2.jpeg

3. 更新DOM

更新之后的DOM.jpeg

只增加了最后一条，所以只需要更新最后一个span就行

补丁函数（增删改查）.jpeg

这个补丁函数不完美，若只是所有数据换个位置，则它也会替换整个DOM

const root = document.getElementById('root')
let vNode1 = v('div', [v('#text', 'hello')])
patchElement(root, vNode1)

let vNode2 = v('div', [v('#text', 'world')])
patchElement(root, vNode2, vNode1) // 更新