Question

在使用vue-infinite-loading 和/或用于渲染表数据的v-data-table时，内存膨胀问题。在.vue文件中。我试图理解为什么在触发无限加载程序时读取50行数据（大小约为100KB）会导致Chrome和IE增加约30MB！

每次在页面底部触发无限加载器时，它都会提取数据（50行，其中约有6列简单数据），我收到然后将数据推送到ajax响应中的数组“列表”中，然后，vue无限加载器在v-data-table表的底部呈现（合并）它。

但是，每次执行新的读取操作时，IE和Chrome占用的内存量都超过30 MB。因此，仅需几次抓取操作，内存就会膨胀，并在机器上停滞。即使要提取的数据量约为100KB。

我获取了100kb的数据，即50行。当我收到数据时，将其推送到这样的列表中

this.list.push(...response.data)

//tried with same memory bloat issue
//this.list = this.list.concat(response.data)

// tried with same memory bloat issue
//this.list = [].concat(this.list, response.data);

数据是一个简单的对象，具有大约6个属性，即整数和字符串

public class GetRecordsReturnViewModel
{
    public int Id { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public string StartDateString { get; set; }
    public string EndDateString { get; set; }
    public string WitnessName { get; set; }
    public string SourceCode { get; set; }
    public string JobsiteName { get; set; }
    public string ShipName { get; set; }
    public string EmployerCode { get; set; }

}

and list是这些对象的数组。

list: {
  get() {
    return this.$store.state.records.list
  },
  set(value) {
    this.$store.commit('records/listUpdate', value)
  }
},

以及变体和组成部分在下面的index.js文件中

const records = {
  namespaced: true,
  state: {
    list: [],
    // other suff
  },
  mutations: {
    listUpdate(state, value) {
      state.list = value
    },
    // other stuff
  },
}

我的vue文件中包含此文件，以在无限加载时显示表格的html

<div class="results-table-wrapper">
  <v-data-table style="" class="max-height-scrollable" :headers="listHeaders" :items="list" :pagination.sync="pagination" hide-actions>

    <template slot="headerCell" slot-scope="props">
                    <span @click="resetForSort(props.header)">{{ props.header.text }}</span>
                </template>

    <template slot="items" slot-scope="props">

                    <tr>

                        <td style="cursor: pointer; color: #1976d2;" @click="routeToListItem(props.item.id)"><span>{{ props.item.id }}</span></td>

                        <td><span>{{ props.item.witnessName }}</span></td>
                        <td><span>{{ props.item.sourceCode }}</span></td>

                        <td><span>{{ props.item.startDateString }}</span></td>
                        <td><span>{{ props.item.endDateString }}</span></td>

                        <td>
                            <span >{{ props.item.jobsiteName }}</span>
                            <span ><br /></span>
                            <span >{{ props.item.shipName }}</span>
                        </td>

                        <td><span>{{ props.item.employerCode }}</span></td>

                    </tr>
                </template>

    <template slot="no-data">
                    <p class="text-xs-center" v-show="!listHasItems">Use at least 1 filter and press the search button.</p>
                </template>
  </v-data-table>
</div>
<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading" v-show="showList == true">
  <span slot="no-results">
                No records found.
            </span>
  <span slot="no-more">
                No more records.
            </span>
  <span slot="spinner">
                <font-awesome-icon icon="circle-notch" spin />
            </span>
</infinite-loading>

使用vue-infinite-loader在v-data-table中渲染50行数据时出现内存膨胀

0 个答案: