DOM总结
虚拟DOM是什么
一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其它属性
虚拟DOM有什么优点
1.能减少不必要的DOM操作（减少操作次数和减少操作范围）
① 虚拟DOM可以将多次操作合并为一次操作，比如你有1000个节点，用JS需要操作 1000次，而用虚拟DOM是你往数组里面放1000个节点，我一次性把1000个节点放
在 页面上 （只操作了一次）;
② 虚拟DOM借助DOM diff把多余的操作省掉 ，比如我之前页面有1000个节点，现在需
要操作1010个 ，那么多增加了10个 ，用虚拟DOM可以把之前操作的1000次记录下
来，只取出来新增的10个节点操作即可
2.能跨平台渲染
虚拟DOM不仅可以变成DOM,还可以变成小程序、IOS应用、安卓应用，因为虚拟DOM本质上只是一个对象
虚拟DOM有什么缺点
需要额外的创建函数，如cerateElement 或 h ，但可以通过JSX来简化XML写法
DOM diff 是什么
就是一个函数，我们称为patch
changed = patch(oldVNode,newVNode)
**********************不重要************************
changed就在要运行的DOM操作，可能长这样：
[
{type: 'INSERT',vNode : ...},
{type: 'text',vNode : ...},
{type: 'PROPS',propsPatch :[...]},
]
DOM diff的大概逻辑
Tree diff
将新旧两棵树逐层对比，找出哪些节点需要更新
如果节点是组件就看Component diff
如果节点是标签就看Element diff
Component diff
如果节点是组件，就先看组件类型
类型不同直接替换（删除旧的）
类型相同则只更新属性
然后深入组件做Tree diff(递归)
Element diff
如果节点是原生标签，则看标签名
标签名不同直接替换，相同则只更新属性
然后进入标签后代做Tree diff(递归)
DOM diff 的优点
同级节点对比
跨平台渲染
DOM diff 的问题（key）
同级节点存在bug
解决方法 ：:key = 'id' //默认不写时出现bug 相当于:key = 'index'
===>>千万不要用index作为key的值 ，因为index它是会变化的 你删除了中间一个 第三个自动变成了index=2
