virtual dom (虚拟dom)

1. 用js模拟dom结构。

• 因为前端只有js为图灵完备语言。

2. 通过 js计算 减少 dom操作，节省性能

• dom操作是最耗费性能的（原因及传统优化方法）；

  1. 浏览器中，js与dom的实现是分离的，js操作dom相当于两个模块做交互；
  2. 最主要的原因，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)：

  1. 如果第一个参数为node，则把node替换成vnode的结构；
  2. 如果第一个参数为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算法对比，相同则递归对比，不同则通过关联找到并修改真实节点；
  • 上述只是节点修改，还会有节点新增删除、节点重新排序、节点样式属性事件更新、性能优化等等复杂情况。