名词解释
- 状态：某种意义上来说，任何应用都有状态。不是只有使用了现代比较流行的框架（React、Vue、Angular）之后才有的状态。但现代框架揭露了一个事实：我们的关注点应该聚焦在状态维护上。并且DOM操作其实是可以省略掉的。如：使用jQuery开发的应用也是有状态的，应用中所使用的变量都是状态。状态可以是Javascript中的任意类型。Object、Array、String、Number、Boolean等都可以作为状态。
- 渲染：我们把状态当作输入， 并生成DOM输出到页面上显示出来，这个过程叫做渲染。
- 虚拟DOM的解决方式是：通过状态生成一个虚拟节点树， 然后是使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点数和上一次生成的虚拟节点树进行对比，只渲染不同的部分。（虚拟节点树其实是有组件树建立起来的整个虚拟节点树）
问题重点
通常程序在运行时，状态会不断发生变化（引发状态变化的原因有很多，有可能是用户点击了某个按钮，也可能是某个Ajax请求，这些行为都是异步发生的。理论上， 所有异步行为都有可能引起状态变化）。每当状态变化的时候，都需要重新渲染。如何确定 状态中发生了什么变化以及需要在哪里更新DOM？
解决方式
- 最简单粗暴的解决方式：既不关心状态发生了什么变化， 也不需要关心在哪里更新DOM，我们只需要把所有的DOM全删了，然后使用状态重新生成一份DOM，并将其输出到页面上显示出来就好了。
- 当某个状态发生变化了，只更新这个状态相关联的DOM节点。
针对解决方式二，有很多种解决方案，目前比较流行的主要是三大框架React、Angular、Vue。个人比较熟悉的是React和Vue。React中使用虚拟DOM，Vue.js1.0通过细粒度的绑定，Vue.js2.0选择中等粒度的解决方案， 引入虚拟DOM，状态变化通知到组件， 然后在组件内部通过虚拟DOM去进行比对和渲染。
虚拟DOM做了两件事：
- 提供与真实DOM节点所对应的虚拟节点vnode
- 将虚拟节点vnode和旧虚拟节点oldVnode进行比对，然后更新视图。
其中虚拟DOM中最核心的算法————对两个虚拟节点进行比对。
参考书籍
《深入浅出Vue.js》
