Проблемы производительности vueJS и нескольких холстов в Electron

Question

Я работаю над программным обеспечением, которое содержит n полотен, где n - это массив плиток (где каждая плитка состоит из набора 8 * 8 массивов необработанного гексагона, я не буду вдаваться в подробности об этомфронт, но достаточно сказать, что это здоровенный кусок кода для рендеринга каждой плитки).Для аргумента предположим, что страница загружает 800 плиток;рендеринг каждой плитки путем перекрестной ссылки на данные пикселей с шестнадцатеричной палитрой.Мой алгоритм работает хорошо и является производительным;около секунды на весь лот.структура компонентов системы выглядит примерно так:

<t-table>
   <t-table-row v-for="(row) in rows">
      <t-table-cell v-for="(cell) in cells">
         <canvas />

над компонентом t-table - это мой index.vue, в котором я назначаю ключевые команды

  mounted () {
    window.addEventListener('keydown', this.keyCommands)
  },
  beforeDestroy () {
    window.removeEventListener('keydown', this.keyCommands)
  }

ключевые команды включаюткоманда удаления (которая помещает состояние выбранного тайла пользователя в кеш отмены, а затем обнуляет данные мозаики с заданным смещением) и команда отмены (которая выдает кэш отмены и повторно отображает холст с предыдущими данными)

из-за громкости слушателей, необходимых для того, чтобы каждый наблюдал состояние хранилища на предмет изменений (даже с использованием метода получения, который принимает аргументы, я не мог заставить это работать хорошо), лучше вручную выполнить команду рендеринга с помощью команд dom: document.getElemebyId(offset).firstElementChild (я пытался использовать document.querySelector( # $ {offset}> canvas) `, но он не всегда работал надежно)

Я сталкиваюсь с ненадежным поведением с функцией отмены;проблема почти наверняка связана с асинхронностью виртуального DOM.Я пробовал множество разных подходов, но ошибка всегда одна и та же: в лучшем случае

// the following is performed in a single lifecycle

story # |                                     | bugs?
1       | deletes x tiles and then undoes all | none
2       | spams undo with nothing to undo     | hard to test, indication is none
3       | deletes x tiles and then undoes all | see below...

, в истории 3 отмена выполняется, но кэш содержит плитки в неправильном порядке.В худшем случае кеш пропускает некоторые или все тайлы при повторном рендеринге.

Я пытался инкапсулировать методы рендеринга и принудительного удаления, чтобы отменить кеширование в Promises, а затем awaiting их в моем методе keyCommands, но это не делаетКажется, в Electron ничего не происходит, потому что ничего не происходит, когда я нажимаю delete / ctrl z.

Я также пытался использовать lodash debounce, чтобы ограничить пользовательский ввод, к сожалению, это, похоже, не помогает (во всяком случае, результаты менее предсказуемы, когда деблокированы ключевые команды)

Кто-нибудь знает, как я могу решить эту проблему?

вот основная функция рендеринга, если она окажется полезной:

renderCell ({ data, offset }) {
      if (data) {
        const canvas = document.getElementById(offset).firstElementChild
        if (canvas) {
          let ctx = canvas.getContext('2d')
          data.forEach(function (line, y) {
            line.forEach(function (pixel, x) {
              let p = this.palette[0][parseInt(pixel, 2)]
              if (p && p.hasOwnProperty('color')) {
                ctx.fillStyle = p.color
                ctx.fillRect(x * 8, y * 8, (x * 8) + 32, (y * 8) + 32)
              }
            }.bind(this))
          }.bind(this))
        }
      }
    }