不再解释什么是virtual dom了，烂大街了。
这里问题核心是vue本身具有数据绑定或者说数据劫持，我们的数据是对应着某个dom的某个属性的。通过数据绑定，我们的数据可以“靶向”定位出具体哪个dom的哪个属性，然后直接dom操作进行修改，何必搞什么virtual dom和diff，直接更新过去不就行了？
至于最小化操作，我们完全可以保留一份老数据，然后异步统一对比新老数据，有不同的就更新，也不需要diff啊？
知乎 Vue采用虚拟DOM的目的是什么?
vue是从2.0引入virtual dom的，那么首先看：
Announcing Vue.js 2.0
Vue 2.0 发布了！
Vue 的理念问题
从性能方面：
现在的渲染层基于一个轻量级的 virtual-DOM 实现，在大多数场景下初试化渲染速度和内存消耗都提升了 2~4 倍 (详见这里的 benchmarks)。从模板到 virtual-DOM 的编译器和运行时是可以独立开来的，所以你可以将模板预编译并只通过 Vue 的运行时让你的应用工作起来，而这份运行时的代码 min+gzip 之后只有不到 12kb (提一下，React 15 在 min+gzip 之后的大小是 44kb)。编译器同样可以在浏览器中工作，也就是说你也可以写一段 script 标签然后开始你的工作，就像以前一样。而即便你把编译器加进去，build 出来的文件 min+gzip 之后也仅有 17kb，仍然小于目前的 1.0 版本。
2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写。在其上层，Vue 的模板编译器能够在编译时做一些智能的优化处理，例如分析并提炼出静态子树以避免界面重绘时不必要的比对。新的渲染层较之 v1 带来了巨大的性能提升，也让 Vue 2.0 成为了最快速的框架之一。除此之外，它把你在优化方面需要做的努力降到了最低，因为 Vue 的响应系统能够在巨大而且复杂的组件树中精准的判断其中需要被重绘的那部分。
总的来说：体积不变多少，初始化渲染性能提升，内存占用减少。
1.体积不变暂且不说，初始化渲染提升、内存占用减少是为什么？
单文件vue的加入，编译时便可依靠vdom把模板文件进行一定预编译，无需如模板字符串template:"<div>...</div>"等从零编译，资源占用应当变少(好像不需要vdom也能这样优化，会复杂了点...？)。
2.关于vdom多了diff的问题，vue并没有抛弃自己响应式的根。凭借原有基础vue的vdom实现具有自我特色，无需像react那样搞什么shouldcomponentupdate来优化，vue自己就能较为精准避免不需要的diff，速度仍然很快(不用vdom根本不用diff...？)
3.又如列表方面，采用vdom可以提高复用真实dom。如解析vue2.0的diff算法，这里如果不采用vdom，单凭数据绑定作出的选择就是直接新建、删除已有节点
功能方面
最直接的就是多了render函数、支持了jsx、可以实现服务器渲染。除此之外还有更多的可扩展性和更高一层的抽象能力，而且很大可能是出于这部分考虑而非性能(反正事实证明比原来快，也没毛病)，引用作者尤雨溪部分原话：
Vue 2.0 引入 vdom 的主要原因是 vdom 把渲染过程抽象化了，从而使得组件的抽象能力也得到提升，并且可以适配 DOM 以外的渲染目标。这一点是借鉴 React 毫无争议，因为我认为 vdom 确实是个好思想。
网友评论