vue性能问题？

Question

相较于jquery频繁操作DOM，vue的虚拟DOM与数据渲染是不是使页面性能有了很大的提升？！

Answer 1

其实并没有，但是胜在方便。

你可以看一看 Vue.js 的更新数据 Diff 算法就可以发现，Virtual DOM render + diff 显然比渲染 html 字符串要慢的，虽然 Diff 算法复杂度为 O(n) ，可以得到最小操作结果，但是当 DOM 树很大的时候，遍历两棵树的性能损耗还是很大的。可以结合下图看看 Vue 的 Diff 算法：

（图片来自于网络）

其实在得到最小化的 DOM 操作结果 DOM 之前，Vue 是需要进行 Diff 算法的，而手动 DOM 操作都是尽可能一一对应的也就是最小化 DOM 操作。

最后引入尤雨溪大大的一句话：

在我看来 Virtual DOM 真正的价值从来都不是性能，而是它 1) 为函数式的 UI 编程方式打开了大门；2) 可以渲染到 DOM 以外的 backend，比如 ReactNative。

Answer 2

大。很大。非常大。dom本身上面有非常多的属性。可以调试一下看到。而虚拟dom只有必须的属性。所以操作起来性能会更好

Answer 3

提高性能，比如说列表的for循环，都会要求加上一个唯一的key.如果不加key的话控制台会报警告.这个key的作用是为vue的响应式渲染提供方法，复用虚拟dom,减少资源的消耗

Answer 4

比原生操作要慢
最后都要操作dom 只要你操作dom那就是要通过dom提供的api(这一步vue和我们都是一样的)
增加virtual dom 多了一层怎么能快

    // 我们自己
    data => dom api => html
    // vue
    data => virtual dom => patch virtual dom => dom api => html

他唯一的优势就是他帮你做了这一层你不需要在手动去同步data=>view
并且他并不比你慢太多,这样可以解放出来我们更多的关注业务