vue数组的性能问题，求解！

Question

问题描述

假设有这么一个数组, 长度为10000

items: [
    { name: 'a' },
    { name: 'b' },
    { name: 'c' },
    ...
]

然后用它来渲染一个列表，现在问题是，如果我要修改某个对象的值，比如

this.items[100].name = 'haha'

页面重渲染的时候就会出现延迟卡顿

问题出现的环境背景及自己尝试过哪些方法

跟了一下vue的源码

get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          dep.depend();
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              console.log(就是这里)
              dependArray(value);
            }
          }
        }
        return value
      },

它会触发 dependArray(value) ，value值对应items数组，而这个方法会遍历整个数组重新收集依赖

所以有没有什么好的方法来解决这个问题？

Answer 1

1. 你页面上是否加上了 key 这个属性
2. 为什么一下子渲染如此多的数据，这个可能是你们的变态需求把。 但是确定瓶颈是vue这里吗？dom渲染是不是也会出现瓶颈

1. 如果真的是这个需求，我建议你可以对数组进行才分，把你这个大数组，分层几个小数组，然后修改的时候，定位 角标，看看落在哪个小数组里面，再去修改对应的小数组； 可能会好很多

Answer 2

1、数组长度过长，建议切片分组。
2、添加key优化效率
3、是项目需求还是自己做着玩的？

Answer 3

嘎嘎 用一句周星驰的台词：这样的要求，我这辈子没见过