什么是虚拟DOM

什么是虚拟dom

虚拟dom本质上就是一个普通的JS对象，用来描述视图上应该有哪些界面结构，并不生成界面。

在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树。

因此，vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。

为什么需要虚拟dom

举个例子：
在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。

而虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

虚拟dom的意义 ：

vdom 的真正意义是为了实现跨平台，服务端渲染（从而诞生了react native等）；
提供一个性能还算不错 Dom 更新策略；
vdom 让整个 mvvm 框架灵活了起来。