虚拟 DOM

使用 JavaScript 对象来描述 UI 的方式，就是所谓的虚拟 DOM。虚拟 DOM 的意义就在于使找出差异的性能消耗最小化。

html

<h1 @click="handler"><span></span></h1>

与之对应的虚拟 DOM 如下：

{ tag: 'h1', props: { onClick: handler } }

优势

首先，它设计的最初目的，就是更好的跨平台，比如 Node.js 就没有 DOM，如果想实现 SSR，那么一个方式就是借助虚拟 DOM。在代码渲染到页面之前，vue 会把代码转换成一个对象（虚拟 DOM）。
其次，在每次数据发生变化前，虚拟 DOM 都会缓存一份，变化之时，新旧虚拟 dom 通过 diff 算法找到需要修改的节点，以此来提高性能（性能高于直接操作真实 DOM）。

为什么快？