Feels Vue is not very friendly to large array. 感觉 vue 对大数组不太友好

For example, if there are 100000 pieces of data in a list, as long as another value is modified, the component’s render function will be re-executed. Although dom has cache, js’s single-thread execution takes time.A small amount of data is fast, but a large amount of data is time consuming, causing a lag.I don’t know how vue optimizes massive data.

比如一个 list 中有10万条数据,那么只要修改其他一个值,组件的 render 函数又会重新执行,虽然 dom 有缓存,但 js 单线程执行也是需要时间的;少量数据循环是很快的,但对于很大数据的循环很耗时间,就会造成卡顿现象。不知道 vue 对海量的数据有什么优化的方式?

你自己要優化不是Vue要幫你優化,你可以考慮用web workers做計算讓你的main thread不blocking…另外你的v-for裡有bind key嗎?

所以说对大数组不是很友好,减少render中大数据循环的方法估计也就是不使用双向绑定,那这样也就失去了vue的优势 哈

100,000 items in a list is extremely large, regardless of using Vue. There are some things you can do to help performance, which is nicely presented in this VueConf video: https://www.vuemastery.com/conferences/vueconf-us-2019/9-performance-secrets-revealed/

Using a Virtual Scroller is likely the solution you want so you can display and manipulate only a subset of that list. He discusses this at about 22:45 into the video.

Object.freeze()了解一下:
image

这个不是vue对大数组不太友好,你大数据数组的话,单纯的js处理也是耗时很久的,和浏览器的计算能力有关系。

1 Like

Object.freeze 这个只能用于只读列表,对于列表中某些数据可能发生改变就不适用了,适用场景并不多

这个我知道,优化肯定是要的,当我期望的是能优化成更新一条数据就只是动这一条的数据,而不需要重新触发 render函数,因为数据一旦变动,render又会重新循环,就会相对耗时一些 哈,由于数据双向的原因,个人觉得貌似是不能做到像原生一样可以局部去修改列表中的某一行。

This is a really good optimization

你这个目前是不可能的,因为vue的机制决定了,但是我觉得vue引用了虚拟demo已经属于优化的比较好的框架了。希望后面能有新的设计模式来解决这种问题吧

你绑定了key值了吗?绑定一个唯一的key值就是让vue进行局部渲染优化的;
但是,作为单页应用,页面中有100000个列表似乎太过极端了,应该配合后端动态加载和控制显示范围。

实际1万条就开始有点卡顿了,主要是 render 执行太频繁,任意数据一改动都会触发