虚拟DOM和diff算法

虚拟DOM和diff算法

1.虚拟DOM
1.1核心思想：对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作
1.2根据虚拟DOM树最初渲染成真实DOM
1.3当数据发生变化，页面需要重新渲染的时候，会重新生成一个完整的新的虚拟DOM
1.4拿新的的虚拟DOM与以前的虚拟DOM做对比(diff算法)，得到更新的内容后，更新内容，减少真实DOM的操作，提高性能

1.5不适合再单一，频繁的更新，

2.diff算法
2.1在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
2.2在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。
2.3节点类型改变，就把旧节点卸载，安装替换新节点
2.4节点类型不变，属性和属性值改变时，不会卸载节点，执行替换节点操作
2.5文本改变，直接修改文本内容
2.6移动，添加，删除节点时，会直接执行卸载重装，如果给元素添加一个key，vue就能根据key找到具体的位置，更高效的执行
2.7在v-for中提供key，一方面可以提高性能，一方面也会避免出错

3.diff的优缺点
1.优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能
2.缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点