虚拟 DOM

虚拟 DOM 的优缺点？

虚拟 DOM 是什么？

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中.
虚拟DOM的作用：使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。
另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

优点：

• 保证性能的下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
• 跨平台渲染： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
• 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；

缺点:

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。
需要额外的创建函数，如 createElement 或 h，但可以通过 JSX或者vue-loader 来简化成 XML 写法。但是这么做会依赖打包工具。

DOM diff 的优点

可以做到只把变化的部分重新渲染,提高渲染效率的过程。

DOM diff 的问题（key）

同级节点对比存在 bug

解决方法：用唯一Key值进行区分