虚拟dom

vue中的虚拟dom

简介

首先vue会把模板编译成render函数，运行render函数生成虚拟dom

虚拟dom通过 diff算法对比差异渲染不同的部分然后更新视图

为什么会需要虚拟dom

在主流框架 Angular , Vue.js (1.0) 和 React 中都有一个共同点，那就是它们都不知道哪些状态（state）变了。因此就需要进行比对，在React中使用的虚拟dom比对， Angular 中使用的是脏检查的流程

而在 Vue.js中使用的是变化侦测的方式，它在一定程度上知道具体哪些状态发生了变化，这样就可以通过更细粒度的绑定来更新视图。也就是说，在Vue.js中，当状态发生变化时，它在一定程度上知道哪些节点使用了这个状态，从而对这些节点进行更新操作，根本不需要比对

但是这样做的代价就是，粒度太细，每一个都有对应的 watcher 来观察状态变化，这样就会浪费一些内存开销，绑定的越多开销越大，如果这运用在一个大型项目中，那么他的开销无疑是非常大的

因此从 Vue.js 2.0 开始借鉴 React 中的虚拟DOM ，组件级别是一个watcher实例，就是说即便一个组件内有10个节点使用了某个状态，但其实也只有一个watcher在观察这个状态的变化。

什么是虚拟dom

虚拟DOM是通过状态生成一个虚拟节点树（vnode） ，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比 （diff算法） ，只渲染不同的部分

虚拟节点树其实是由组件树建立起来的整个虚拟节点（Virtual Node，也经常简写为vnode）树

在Vue.js中，我们使用模板来描述状态与DOM之间的映射关系。Vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面

模板编译成render函数

将模板编译成渲染函数可以分两个步骤，先将模板解析成AST（Abstract Syntax Tree，抽象语法树），然后再使用AST生成渲染函数。

但是由于静态节点不需要总是重新渲染，所以在生成AST之后、生成渲染函数之前这个阶段，需要做一个操作，那就是遍历一遍AST，给所有静态节点做一个标记，这样在虚拟DOM中更新节点时，如果发现节点有这个标记，就不会重新渲染它。所以，在大体逻辑上，模板编译分三部分内容：

将模板解析为AST
遍历AST标记静态节点
使用AST生成渲染函数

虚拟dom做了什么

虚拟DOM在Vue.js中所做的事情其实并没有想象中那么复杂，它主要做了两件事。

提供与真实DOM节点所对应的虚拟节点vnode。
将虚拟节点vnode和旧虚拟节点oldVnode进行比对，然后更新视图。

对两个虚拟节点对比是虚拟dom 中最核心的算法（diff），它可以判断出哪些节点发生了变化，从而只对发生了变化的节点进行更新操作

小结

虚拟DOM是将状态映射成视图的众多解决方案中的一种，它的运作原理是使用状态生成虚拟节点，然后使用虚拟节点渲染视图。

为什么什么会需要虚拟dom

框架设计

Vue 和 React 框架设计理念都是基于数据驱动的，当数据发生变化时就要去更新视图，要想知道在页面众多元素中改动数据的元素并根据改动后的数据去更新视图是非常困难的

所以 Vue 和 React 中都会有一个 Render函数 或者类似于Render函数的功能，当数据变化时全量生成Dom 元素如果是直接操作 真实Dom 的话是很昂贵的，就会严重拖累效率，所以就不生成真实的Dom，而是生成虚拟的Dom 当数据变化时就是对象和对象进行一个对比，这样就能知道哪些数据发生了改变从而去操作改变的数据后的Dom元素

这也是一个 “妥协的结果”

跨平台

现阶段的框架他不仅仅能在浏览器里面使用，在小程序，移动端，或者桌面端也可以使用，但是真实Dom仅仅指的是在浏览器的环境下使用，因此他不能直接生成真实Dom ，所以选择生成一个在任何环境下都能被认识的虚拟Dom 最后根据不同的环境，使用虚拟Dom 去生成界面，从而实现跨平台的作用 --- 一套代码在多端运行