虚拟DOM与DOM diff

虚拟DOM

减少DOM操作：

• 虚拟dom可以将多次操作合并成一次操作，比如你添加1000个节点，却是一个接一个操作
• 虚拟dom借助dom diff可以把多余的操作省掉，比如你添加1000个节点，其实只有10个是新增的

跨平台：

• 虚拟dom不仅可以变成dom，还可以变成小程序、ios应用、安卓应用、因为虚拟dom本质上只是一个JS对象

React使用 JSX 创建虚拟dom：通过balel转为createElement形式

Vue使用 Template 创建虚拟dom：通过vue-loader转成h=>h()形式

操作的dom数量级太大（比如10W个），反而直接操作真实dom快；操作dom数量级合理（比如1K个），虚拟dom优化更好。

DOM DIFF

一个函数称之为patch

patches=patch(oldVNode,newVNode)

Tree diff

• 将新旧两棵树逐层对比，找出哪些节点需要更新
• 如果节点是组件就看Component diff
• 如果节点是标签就看Element diff

Component diff

• 如果节点是组件，就先看组件类型
• 类型不同直接替换（删除旧的）
• 类型相同则只更新属性
• 然后深入组件做Tree diff（递归）

Element diff

• 如果节点是原生标签，则看标签名
• 标签名不同直接替换，相同则只更新属性
• 然后进入标签后代做Tree diff（递归）

明显BUG修复：

加key唯一标记每个节点，diff算法更好对比（不建议使用:key=index，建议使用:key=id）DOMDiff算法是通过key来判断DOM节点是否变化的。

下面就是默认不加key，或者使用:key=index：

['吴彦祖'key1,'陈冠希'key2,'陈奕迅'key3]==点击删除"陈冠希"生成新虚拟dom==>[key1,key3]==进行DOMDiff对比算法认为key2改成了key3==>['吴彦祖','陈奕迅']==重新绑定key值==>['吴彦祖'key1,'陈奕迅'key2]

下面是使用:key=id：

[{id:1,'吴彦祖'},{id:2,'陈冠希'},{id:3,'陈奕迅'}]==点击删除"陈冠希"生成新虚拟dom==>[{id:1},{id:3}]==DOMDiff对比算法认为id2改成了id3==>[{id:1,'吴彦祖'},{id:3,'陈奕迅'}]==重新绑定key值为id==>[{id:1,'吴彦祖'},{id:3,'陈奕迅'}]