Утечка памяти vue axios - PullRequest
Новая
       52

Утечка памяти vue axios

0 голосов
/ 15 января 2020

Я создаю пользовательский интерфейс с Vue - создан с помощью @ vue / cli 4.1.2. Очень просто с не так много компонентов. Меню слева и результаты (в таблице справа). Http-запросы выполняются с помощью ax ios, а результаты (ответы) составляют примерно 1000 строк * 6 столбцов (объекты размером около 200 КБ). Я использую Vuex и Router. Тем не менее, размер HEAP продолжает расти с каждым моим запросом. Как будто все загруженные данные (и многое другое) никогда не освобождаются из памяти. От первоначального размера кучи 18 МБ увеличивается до cca100 МБ с запросами приложения 10.

Я попытался изолировать проблему с отключением хранилища, изменением части шаблона (фактически, вообще ничего не показывая, кроме количества записей) но понятия не имею, что вызывает это. Пытался обнулять значения gridData и gridColumns перед каждым повторным запросом, но ничего не помогает. Кажется, что все данные хранятся в памяти и никогда не выпускаются. Попытался проанализировать с помощью инструментов Google Dev, но не смог решить эту проблему.

Компонент, который отвечает за выполнение / и отображение запросов, выглядит следующим образом: 

<code>  <template>
  <main>
    <form id="search">Search <input
        name="query"
        v-model="searchQuery"
      /></form>
    <pre>cParamsRecord: {{ cParamsRecord }}
cActiveGrid: {{ cActiveGrid }}
cActiveRSet: {{ cActiveRSet }}
{{col}} {{entry [col]}} Количество записей здесь: {{propertyComputed}} import {rSetParams} из "@ / детская площадка / mockData js."; импортировать api_service из "@ / services / api_service"; импортировать * как типы из "@ / store / types. js"; экспорт по умолчанию {имя: "pGrid1", компоненты: {}, data () {return {searchQuery: "", gridData: null, gridColumns: null, rSetParams: rSetParams, свойство: "Blank"}; }, вычисляется: {cActiveRSet: {get () {вернуть это. $ store.getters [types.ACTIVE_R_SET]; }, set (value) {this. $ store.commit (types.ACTIVE_R_SET, value); }}, cActiveGrid: {get () {вернуть это. $ store.getters [types.ACTIVE_GRID]; }, set (value) {this. $ store.commit (types.ACTIVE_GRID, value); }}, cRSetParams: {get () {вернуть это. $ store.getters [types.R_SET_PARAMS]; }, set (value) {this. $ store.commit (types.R_SET_PARAMS, value); }}, cActiveRow: {get () {вернуть это. $ store.getters [types.ACTIVE_ROW]; }, set (value) {this. $ store.commit (types.ACTIVE_ROW, value); }}, cParamsRecord: {get () {вернуть это. $ store.getters [types.PARAMS_RECORD]; }, set (value) {this. $ store.commit (types.PARAMS_RECORD, value); }},}, method: {// функция, которая заставляет http прочитать запрос http и локально сохраняет данные в // данных компонента (this.gridData и this.gridColumns asyn c getRData () {this.gridData = null this.gridColumns = null console.log ("запуск getRData для сетки:", this.cActiveGrid, "и подпрограммы set:" + this.cActiveRSet); if (this.cActiveRSet && this.cActiveGrid) {var queryData; try {this. $ store .commit (types.IS_LOADING, true); const рутина = this.cActiveRSet + "_" + this.cActiveGrid + "r"; console.log ("рутина:", рутина); const r1 = await api_service.getRData (рутина ); // const result = await r1 queryData = r1; this.gridData = queryData.data; console.log (this.gridData); this.gridColumns = this.getTblHeadersFromResults (this.gridData); // сохранить данные в правой переменной vuex (в данном случае R1_DATA) if (this.cActiveGrid == 1) {this. $ store.commit (types.R1_DATA, queryData.data); } else if (this.cActiveGrid == 2) {this. $ store.commit (types.R2_DATA, queryData.data); } else if (this.cActiveGrid == 3) {this. $ store.commit (types.R3_DATA, queryData.data); } this. $ store.commit (types.IS_LOADING, false); return queryData; } catch (e) {this. $ store.commit (types.IS_LOADING, false); console.error (е); }} else {console.log («asyn c getRData не запускается, потому что нет cActiveRSet или cActiveGrid»); }}, // функция для определения активной строки в таблице - - когда мы щелкаем по строке, объект строки сохраняется в cActiveRow setActiveRow (row) {console.log ("в setActiveRow и row is:", row); this. $ store.commit (types.ACTIVE_ROW, row); this.createParamsRecordForNextGrid (); this.getRDataForNextGrid (); }, // создание объекта tblHeaders из первой строки результатов getTblHeadersFromResults (res) {var tblHeadersRaw = Object.keys (res [0]); return tblHeadersRaw; }, // объединяем значения из нашей записи (нажатие) - iecActiveRow с rParams, чтобы получить соответствующую запись для использования ее при выполнении http-запроса createParamsRecordForNextGrid () {console.log ("launch fun c createParamsRecord"); var nextGrid = this.cActiveGrid + 1; var rR = this.cActiveRSet + "_" + nextGrid.toString () + "r"; // здесь создаем имя нашей подпрограммы // const rR = "r_00305" console.log ("rR:", rR); //console.log("rSetParams: "+ JSON .stringify (rSetParams)) var rParams = this.cRSetParams.filter (r => r.i9_routine_name == rR); // онил получает параметры для нашей подпрограммы из i9 (rSetParams) console.log ("rParams:", rParams); // eslint-disable-next-line no-unused-vars var paramsRecord = {}; console.log (this.cActiveRow); var cActiveRowObj = this.cActiveRow; for (ключ var в cActiveRowObj) {//console.log(key) для (var i = 0; i

После

...