虚拟DOM

单一事实来源，任何要在组件之间共享的数据，都需要保存在一个地方，与使用它的组件分开。这个单一的位置被称为“商店”。组件必须从该位置读取应用程序数据，而不是保留自己的副本以防止冲突或分歧。

数据只可读，组件可以自由地从存储中读取数据。但他们不能更改存储中的数据，至少不能直接更改。相反，他们必须通知存储他们更改数据的意图，并且存储将负责通过已定义“更新”的函数进行这些更改。

更新是同步的，我们根据上面的两个原则，就能很便利的追踪数据的状态变化和调试，但是如果是异步的话，我们就不能很好的判断执行的顺序。

三、具体使用

具体的应用就是我们常见的 VUEX 和 React 中。

虚拟DOM

一、什么是虚拟 DOM呢？

再过去或者我们原生JavaScript的时候，我们可以发现，当我们需要改变视图的数据的时候，我们往往需要先获取到这个 DOM 元素，然后对其进行更新。也就是：

数据改变-->操作DOM--> 视图更新

但是我们在 VUE或者 React 中是直接改变 Data 就能实现视图的更新了。

数据改变-->视图更新

那么要是我们每一次数据改变都需要操作 DOM，那就非常麻烦，而且慢。因为 JavaScript执行时很快的，但是操作 DOM就不是了。所以就有了虚拟 DOM了

数据改变-->操作虚拟 DOM（计算变更）-->操作真实的 DOM--> 视图更新

那么什么虚拟 DOM 呢？

可以说虚拟 DOM 本质上是 JS 和 DOM 之间的映射，表现为是一个能描述 DOM结构及其属性信息的 JS对象。那么下面我们看一个例子为什么这么说吧：

//我们定义的 DOM <div id="app">

<p class="text">hello</p> <h1 class="text">hello world!!!</h1>

</div>

//转换为虚拟 DOM {

tag: 'div', props: {

id: 'app' },

chidren: [ {

}, chidren: [

'hello' ]

}, {

tag: 'h1', props: {

className: 'text' },

chidren: [ 'hello world!!!'

] }

] }

实际上就是通过 JavaScript 对象来作为基础的树，用对象的属性来描述节点，然后通过映射成真实的 DOM 结构。

二、那么这么做有什么好处呢

1、优化性能

我们常说要减少重排的发生，那是为什么呢，因为那会涉及到 DOM 树的重新渲染。而操作 DOM 树是比较慢的，且 DOM 元素的数量谁很庞大的，当操作 DOM 很容易带来页面的性能问题。很容易给用户带来不好的体验，而

这点是很重要的，可以说我们前端页面是与用户的第一个窗口。

比如，正常情况下，当我们要更新10个节点的时候，浏览器就会计算 10次，一次一次的进行更新。而在使用虚拟 DOM，他相对就好像多了一个缓存区，当 DOM 操作（渲染更新）比较频繁时，它会先将前后两次的虚拟 DOM 树

进行对比，定位出具体需要更新的部分，生成一个“补丁集”（也就是一个 js对象），最后只把“补丁”一次性打在需要更新的那部分真实的 DOM 树上，避免了很多没必要的计算，提高了性能。

2、抽象化渲染过程

很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，

而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种 GUI。

解耦了视图层和渲染平台，带来了更多的可能性

有点像我们语言中，都会编译成 AST，而在这个阶段，可以实现多种转化，就像 Babel，和 ESList 等。

3、缺点也是有的：在初次渲染的时候，会多出一层虚拟DOM的计算，而且使用虚拟DOM也不一定是高效的，往往当我们每一次改动不大的时候，才是相对高效的，但是如果我们改动大的话，相比还多出了更多的计算，是不利

的。

总结