Question

我正在尝试通过带有约50个固定行的自制网格中的多个固定单元格渲染一长串物品。

滚动时，我从Vuex存储数据属性中读取了不同的值，该属性包含约5000行的数组。

因此，重要的是要了解我不不创建新的单元格或行，一旦创建，我只会在滚动时更新其内容。请参见以下内容：

<template>
    <div ref="mygridcell" class='vg-data-cell' v-bind:style='mhstyle'>

        <span>{{ thevalue }}</span>

    </div>
</template>

...partial...

export default Vue.extend({
    props: ['rowNo', 'colDef', 'rowNoVis'],
    data: () => new MyData(),
    computed: {
        thevalue (): string {
            let row = this.$store.state.rowsPrepared[this.rowNo];
            return row["lastName"];
        },

我正在使用Vuex存储，并且在状态上有一个名为“ rowsPrepared”的属性，其中包含5000行的数组。

问题

当我开始滚动并通过'rowsPrepared'Vuex属性读取单元格的值时，这太慢了。

但是，如果我从一个包含5000行的独立静态（未观察到）数据对象中读取数据，那么它会非常快！

因此，问题似乎是当这样阅读时： let s = store.rows[1255]["lastname"] 比： let s = nonobserved.rows[1255]["lastname"]

为什么从“可观察的” vuex属性中读取内容如此缓慢，并且有解决方法？

我所做的是在创建商店后，将'rowsPrepared'属性附加到，这样就不会被观察到，并且滚动确实非常快。但是，如果某个项目更改了它的值，则不会自动跟踪它，因此我将被迫进行骇人的刷新-这是由Vue自己完成的！

任何帮助，不胜感激！

Answer 1

我认为这里的主要问题是您正在访问存储中为网格中每个单元格准备的行。因此，发生的事情是，只要rowsPrepared数组中的任何地方发生更改，即使每个单元格的值尚未更新，都会为每个单元格触发计算属性。您可以通过在计算属性中放置一个控制台来验证这一点，我想您会看到为每个单元格打印的控制台，这会增加滚动的负担。

解决方案：-您需要将rowsPrepared [this.rowNo] ['lastName']作为道具传递给单元格组件，而不是在每个单元格中访问它。

类似：-

<div v-for="(item, index) in rowsPrepared">
 <CellComponent 
     v-bind:value=rowsPrepared[index]['lastName']
     v-bind:colDef = "colDef"
     v-bind:rowNoVi= "rowNoVi">
 </CellComponent> 
</div>

从Vuex观察到的包含许多行的属性中查找非常慢

问题

1 个答案: