есть два больших массива (один порядка 4-5 тысяч объектов, второй может быть меньше).
Компонент строит таблицу с данными. Первый массив cells содержит как раз объекты описывающие вид ячеек.
Второй массив содержит объекты данных {id_ячейки:"sadasd asd asd a", value:"какой то текс или число"}.
Для отрисовки строк и столбцов я сделал computed свойство (многомерный массив на основе первого массива cells)
С первым массивом все более менее нормально, на основании него строится таблица и нормально отрисоввывается.
Проблема со вторым массивом values, он содержит данные которые нужно вставить в соответствующие ячейки.
Данные во первых получаются отдельным запросом и их нужно раскидать по соответствующим ячейкам, и еще они могут изменяться в процессе (отдельными запросами с сервера).
Здесь нужно отметить что ячейка является компонентом и элементы массивов передаются в нее как :cell и :value.
И если cell попадает туда через итерации for по строкам и столбцам computed многомерного массива, то value я перепробовал кучу способов передавать в ячейку. все они либо тормозные либо не вызывают реактивность и не перерисоввывают ячейку.
Грубо все способы можно разделить на те корорые используют реактивность массива values, либо ячейки запрашиваются через метод, что вызывает кучу ненужных вызовов метода.
Подскажите варианты решения данной проблемы. Идеи и варианты спустя две недели кончились.
первое же что приходит в голову:
рисовать таблицу не по данным из массива cell, а по агрегатным данным из вычисляемого computedCell, в котором будут и параметры ячеек и их данные.
но я не полностью уловил суть. Вы можете изобразить рабочий пример на jsfiddle (разумеется с небольшим кол-вом ячеек)?
Это как бы и решение и нет.
Поставил вьюкс. Сделал такое решение, и даже получил решение. Данные стали обновляться.
Тормоза как будто бы даже стали поменьше, но не значительно.
Меня на этом этапе устроило то что хотя бы реактивность работала как надо.
1. Но меня смутило две вещи, что я пихаю в стор данные конкретного компонета. Как бы не очнь красиво
2. Возник вопрос, а нельзя ли такое же поведение сделать в компоненте
И я попробовал.
И получилось.
В компоненте с таблицей я создал data поле values:{} который передаю в каждый компонет-ячейку
Там он дергается по указанному Артемом способу только не из стора, а из входящей проперти values;
Раньше такой способ не работал (хотя я и его пробовал), так как не было реактивности у полей объекта values (их же заранее не инициализировали и они не обрастали проксями);
Сейчас же я при добавлении полей со значениями использую не простое присвоение а Vue.set()
Возможно это выглядит как хак, или это и есть хак,
Но работает замечательно и это решило мои проблемы на 100%
Надеюсь не все 4-5к строк на клиент шлются?
По сути заюзай VUEX, все мутации (изменения данных) проводи через вьюкс, и так же получения данных через вьюкс.
И всё будет хорошо) Главное делать все маленькими порциями ну хотя бы по 100элементов на странице, чтобы клиент не тормозил.
К сожалению нельзя по 100. Страница отображает как бы эксель лист. И соответственно даже таблица 20*30 это уже 600 ячеек, а есть и 20*200.
Возможно неудачно выбран Vue для данной задачи.
Почитал Vuex, думаю он не решит проблемы.
Корень проблемы в том что массив данных большой. Как то разбить я его не могу. То есть при изменении даже небольших порций данных, продергиваться будет весь массив (если я правильно понимаю устройство реактивности вью). Возможно проблему решило бы использование Map но как я понял из документации на мапе реактивность не поддерживается
у меня на странице был список из 1000+ элементов
пока я пытался обманывать vue - все дико тормозило, а когда перестал и сделал через vuex - получил относительно небольшой фриз после загрузки, а потом вполне приемлемую скорость работы
Средний
