1. 用js模拟dom结构。
因为前端只有js为图灵完备语言。
2. 通过 js计算 减少 dom操作，节省性能
dom操作是最耗费性能的（原因及传统优化方法）；
浏览器中，js与dom的实现是分离的，js操作dom相当于两个模块做交互；
最主要的原因，dom操作会导致浏览器重排与重绘。
相对于传统方案全部删除重新渲染，vdom可以做修改前后对比，点对点的更新dom，避免任何多余的dom渲染。
此需求：实现基于数据的修改，实时更新表格。
3. vdom库 snabbdom API
h()：创建虚拟dom
var vnode = h('div', {style: {color: '#000'}}, [ h('h1', 'Headline'), h('p', 'A paragraph'), ]);patch(node|vnode，newVnode)：
如果第一个参数为node，则把node替换成vnode的结构；
如果第一个参数为vnode，则对比差异后把 旧vnode 更新 为新vnode。
注意： 如果第一个参数为vnode，那它必须是patch过的vnode***
tovnode(node,vnode): 基于vnode更新已经存在的node
4. diff算法
用来对比差异的算法，有 linux命令
diff、git命令git diff、可视化diff(github、gitlab...)等各种实现。
5. 简单过程
首次渲染：patch(node，vnode)，同时vnode节点会和真实dom节点做关联
更新 patch(vnode，newVnode)
遍历vnode，通过diff算法对比，相同则递归对比，不同则通过关联找到并修改真实节点；
上述只是节点修改，还会有节点新增删除、节点重新排序、节点样式属性事件更新、性能优化等等复杂情况。
作者：漓漾li
链接：https://www.jianshu.com/p/c815056d4b35
随时随地看视频
